gulp 是前端开发过程中对代码进行构建的工具, 是自动化项目的构建利器; 她不仅能对网站资源进行优化, 而且在开发过程中很多重复的任务能够使用正确的工具自动完成; 使用她, 我们不仅可以很愉快的编写代码, 而且大大提高我们的工作效率
gulp 是基于 Nodejs 的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/CSS 等文件的的测试检查合并压缩格式化浏览器自动刷新部署文件生成, 并监听文件在改动后重复指定的这些步骤在实现上, 她借鉴了 Unix 操作系统的管道 (pipe) 思想, 前一级的输出, 直接变成后一级的输入, 使得在操作上非常简单通过本文, 我们将学习如何使用 Gulp 来改变开发流程, 从而使开发更加快速高效
gulp 和 grunt 非常类似, 但相比于 grunt 的频繁 IO 操作, gulp 的流操作, 能更快地更便捷地完成构建工作
webpack
Webpack 是当下最热门的前端资源模块化管理和打包工具它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源还可以将按需加载的模块进行代码分隔, 等到实际需要的时候再异步加载通过 loader 的转换, 任何形式的资源都可以视作模块, 比如 CommonJs 模块 AMD 模块 ES6 模块 CSS 图片 JSONCoffeescript LESS 等
** 当然个人还是喜欢 webpack 的模块化优秀
废话不多说现在开始 gulp 之旅
初始化项目(此处已经认为 node 环境已经安装)
建立文件夹 名字自己随便取 比如 gulpText, 然后输入以下命令
- $ cd gulpText
- $ mkdir images // 建立存放图片文件夹
- $ mkdir src // 存放 js 以及 css
- $ mkdir index.html // 主页
- $ mkdir gulpfile.js // 编写 gulp 任务文件
- $ mkdir mock //mock 数据
然后输入以下命令 然后一路点下去生成 json 文件
$npm init
打开 json 文件看到这样的
1474889102536.png
全局安装 gulp 以便我们运行 gulp 进行打包等操作
$npm install gulp -g
如果感觉 npm 安装比较慢可以切换至 cnpm 下载, 代码如下
$npm install cnpm -g
安装 gulp 包, 方便我们引用 gulp
$npm install gulp
成功截图
1474889517162.png
编写 gulp 任务
引入 gulp
- // 引入 gulp
- var gulp = require(gulp);
拷贝 Index.html
- //copyhtml
- gulp.task(copy-index,function () {
- gulp.src(./index.html)
- .pipe(gulp.dest(./build));
- })
执行命令
- $ gulp copy-index
- 1474890843877.png](//upload-images.jianshu.io/upload_images/2905209-c00d640651bde279.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)
1474890828271.png
拷贝 images
- //copy images
- gulp.task(copy-images,function () {
- gulp.src(./images**/*)
- .pipe(gulp.dest(./build/));
- })
执行命令
$ gulp copy-iamges
1474891076408.png
1474891039689.png
css 预处理
现在我们在 src 目录里创建文件 styles 放我们的 scss 代码, 需要把 scss 代码编译到 / build/prd/styles / 下
- $ cd src
- $ mkdir styles
- $ cd styles
- $ touch app.scss
- $ touch common.scss
app.scss 项目代码
- @charset "UTF-8";
- @import "./common.scss";
- body{
- background-color: $base-color;
- color: #000;
- font-size: 20px;
- font-weight: 800;
- }
- html{
- width: 100%;
- height: 100%;
- }
- html{
- width: 100%;
- height: 100%;
- }
- .lsds{
- width: 100px;
- height: 100px;
- }
common.scss 代码
$base-color:yellow;
安装 css 预编译包
- $ npm install gulp-sass //sass 编辑包
- $ npm install gulp-minify-css); //css 压缩包
- // 引入 css 预处理模块
- var sass= require(gulp-sass);
- // 引入 css 压缩模块
- var minifyCSS = require(gulp-minify-css);
- //css 预处理
- var cssFiles=[
- ./src/styles/app.scss
- ];
- gulp.task(scss,function () {
- gulp.src(cssFiles)
- .pipe(sass().on(error,sass.logError))
- .pipe(minifyCSS())
- .pipe(gulp.dest(./build/prd/styles/))
- })
编辑 scss
$ gulp scss
开启服务
安装 server 包
- $ npm install gulp-webserver
- // 引入 gulp-webserver 模块
- var server = require(gulp-webserver);
- gulp.task(server,function () {
- gulp.src(./)
- .pipe(server({
- host:127.0.0.1, //ip
- port:80, // 端口
- directoryListing:{
- enable:true,
- path:./
- },
- livereload:true,
- }));
- })
开启服务指令
$ gulp server
然后就可以访问 127.0.0.1 了
添加 watch
- // 侦测文件变化, 执行相应的任务
- gulp.task(watch,function () {
- gulp.watch(./index.html,[copy-index]);
- gulp.watch(./images/**/*,[copy-images]);
- gulp.watch(./src/styles/*.{scss,css},[scss,min]); // 去掉 min
- // gulp.watch(./src/scripts/*.js,[packjs,min]) // 这行先 在配置 js 编译后使用的
- })
- // 第一个参数代表监听的文件 第二个参数是执行的任务
- // 配置 default 任务, 执行任务队列
- gulp.task(default,[watch,server],function () {
- console.log(任务队列执行完毕);
- })
配置 webpack
安装模块
- $ npm install vinyl-named
- $ npm install gulp-webpack
- $ npm install gulp-uglify
- // 引入 js 模块化工具 gulp-webpack, 获取 js 文件模块 vinyl-named,js 压缩模块
- var named = require(vinyl-named);
- var webpack = require(gulp-webpack);
- var uglify = require(gulp-uglify);
- var jsFiles = [
- ./src/scripts/app.js
- ];
- gulp.task(packjs,function () {
- gulp.src(jsFiles)
- .pipe(named())
- .pipe(webpack({
- output:{
- filename:[name].js
- },
- module:{
- loaders:[
- {
- test:/\.js$/,
- loader:imports?define=>false
- }
- ]
- }
- }))
- .pipe(uglify().on(error,function (err) {
- console.log(\x07,err.linerNumber,err.message);
- return this.end();
- }))
- .pipe(gulp.dest(./build/prd/scripts/))
- })
mock 数据
在服务模块中添加整个服务代码为
- gulp.task(server,function () {
- gulp.src(./)
- .pipe(server({
- host:127.0.0.1,
- port:80,
- directoryListing:{
- enable:true,
- path:./
- },
- livereload:true, // 热更新
- // mock 数据
- middleware:function(req,res,next){
- var urlObj =url.parse(req.url,true); //req.url 是整个 url urlObj 是请求的信息集合体
- switch(urlObj.pathname){
- case /api/orders:
- res.setHeader(Comtent-Type,application/json); // // 返回体的格式
- fs.readFile(./mock/list.json,function(err,data){ // 读取文件
- if(err){
- res.send(读取文件错误); // 错误返回 }
- res.end(data); // 返回 json 数据
- });
- return;
- case /api/users:
- return;
- case /api/cart:
- return;
- }
- next();
- }
- }));
- })
版本控制
升级插件
- $ npm install gulp-rev
- $ npm install gulp-rev-collector
- $ npm install gulp-sequence
- // 引入 fs url 模块
- var fs = require(fs);
- var url = require(url);
- // 引入 rev revCollector 模块 提供控制版本号的功能
- var rev = require(gulp-rev);
- var revCollector= require(gulp-rev-collector);
- // 引入 gulp-sequence 模块
- var sequence = require(gulp-sequence);
- // 版本号控制
- var cssDistFile = [
- ./build/prd/styles/app.css
- ];
- var jsDistFile = [
- ./build/prd/scripts/app.js
- ];
- gulp.task(ver,function(){
- gulp.src(cssDistFile) // 执行的文件路径
- .pipe(rev()) // 生成版本号
.pipe(gulp.dest(./build/prd/styles/)) 拷贝了一份 app.css
- .pipe(rev.manifest()) //* 生成如下的这种格式的 json 文件{"app.js": "app-8232057589.js"}
- .pipe(gulp.dest(./build/ver/styles/)) // 拷贝这个文件到指定地方
- gulp.src(jsDistFile)
- .pipe(rev())
- .pipe(gulp.dest(./build/prd/scripts/))
- .pipe(rev.manifest())
- .pipe(gulp.dest(./build/ver/scripts/))
- });
- gulp.task(html,function(){
- gulp.src([./build/ver/**/*,./build/*.*])
- .pipe(revCollector())
- .pipe(gulp.dest(./build));
- });
- gulp.task(min,sequence(copy-index,ver,html)); //sequence 串行执行 并行使用[]
来源: http://www.bubuko.com/infodetail-2521900.html