Gulp是前端构建工具，使用起来相对比较简单（听别人说的，个人还没有多个工具体验经验）。 依个人理解，结合上gulp插件，它能 minify
js``css``html文件，还能合并文件减少资源请求，也可以压缩图片等等。
1. 安装
一般在全局安装后，还需要再项目中本地安装一次，以便版本的灵活性。
代码语言：javascript复制npm install -g gulp 全局方式安装
npm install gulp 在要使用gulp项目中单独安装
#若在安装同时想把gulp写进项目的package.json文件依赖中，用一下命令：
npm install --save-dev gulp 2. 使用流程
2.1 新建一个项目文件夹
新建一个项目，比如本次案例，我们的项目文件夹取名为：demo0927。
2.2 单独安装gulp
在该项目路径下，我们独立安装gulp：npm install gulp 。此时会生成一个 node_modules 文件夹和一个 package-lock.json 文件，如下图：
安装后生成的文件
如果想要使用npm install --save-dev gulp把gulp写进package.json文件依赖，需要先在demo0927文件夹中新建一个package.json文件。
新建的json文件
采用--save-dev本地安装后，json文件中自动写入gulp信息
目前的文件结构
2.3 建立gulpfile.js文件
gulp需要一个文件作为它的主文件——gulpfile.js。我们会在这个主文件中定义我们的任务。 在demo0927文件夹中新建一个gulpfile.js，并写入以下代码：
代码语言：javascript复制var gulp = require('gulp');
gulp.task('default',function(){
console.log('hello world');
});此时我们的目录结构是这样子的： ├── gulpfile.js ├── node_modules │ └── gulp └── package.json
2.4 运行gulpfile.js文件
要运行gulp任务，需切换到存放gulpfile.js文件的目录，然后在命令行中执行gulp命令。 gulp后面可以加上要执行的任务名，例如gulp task1，如果没有指定任务名，则会执行任务名为default的默认任务。
执行`gulp`后的效果，在控制台打印出 'hello world'
3. gulp的API
3.1 gulp.task()
gulp.task方法用来定义任务，内部使用的是Orchestrator，其语法为:
gulp.task(name[, deps], fn)- @param {string}
name任务名 - @param {array}
deps当前定义的任务需要依赖的其他任务。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖，则可省略这个参数 - @param {function}
fn任务函数，任务要执行的代码都写在此处。该参数也是可选的。
case1 基础例子
在gulpfile.js写入以下代码：
代码语言：javascript复制var gulp = require('gulp');
gulp.task('mytask', ['task1', 'task2'], function(){
console.log('hello world');
});
gulp.task('task1', function(){
console.log('He is doing task1.');
});
gulp.task('task2', function(){
console.log('She is doing task2.');
});在命令窗口输入命令gulp mytask，执行结果如下图：
case1 执行结果
gulp.task()比较简单，就是定义要执行的任务，我们需要注意的是当执行多个任务时怎么来控制任务执行的顺序。
case2 执行多个任务
gulp中执行多个任务，可以通过任务依赖来实现。比如想要执行task1 task2 task3 这三个任务，那我们就可以定义一个空的任务，然后把那三个任务当做这个空的任务的依赖。
var gulp = require('gulp');
gulp.task('mytask', ['task1', 'task2', 'task3']);
gulp.task('task1', function(){
console.log('He is doing task1.');
});
gulp.task('task2', function(){
console.log('She is doing task2.');
});
gulp.task('task3', function(){
console.log('It is task3.');
});
gulp mytask 执行结果
如果任务相互之间没有依赖，任务会按照['task1', 'task2', 'task3']数组中任务的排序来执行，如果有依赖的话则会先执行依赖的任务。
比如下面的例子中，task3是task2的依赖，所以虽然task3排在task2之后，但也会先执行。
var gulp = require('gulp');
gulp.task('mytask', ['task1', 'task2', 'task3']);
gulp.task('task1', function(){
console.log('He is doing task1.');
});
gulp.task('task2', ['task3'], function(){
console.log('She is doing task2.');
});
gulp.task('task3', function(){
console.log('It is task3.');
});
case3 如果所依赖的任务是异步的
当某个任务所依赖的任务是异步的，就要注意，gulp不会等待所依赖的异步任务完成；而是直接执行后续任务。
代码语言：javascript复制var gulp = require('gulp');
gulp.task('one', function(){
setTimeout(function(){
console.log('one is one.');
},5000);
});
gulp.task('two', ['one'], function(){
console.log('two is two.');
});
不会等待延时器setTimeout执行
如果我们想等待异步任务中的异步操作完成后再执行后续的任务，该怎么做呢？
有三种方法可以实现： （1）在异步操作完成后执行一个回调函数来通知gulp这个异步任务已经完成,这个回调函数就是任务函数的第一个参数。
代码语言：javascript复制var gulp = require('gulp');
gulp.task('one', function(cb){ //cb为任务函数提供的回调，用来通知任务已经完成
setTimeout(function(){
console.log('one is one.');
cb(); //执行回调，表示这个异步任务已经完成
},5000);
});
//这时two任务会在one任务中的异步操作完成后再执行
gulp.task('two', ['one'], function(){
console.log('two is two.');
});（2）定义任务时返回一个流对象。适用于任务就是操作gulp.src获取到的流的情况。（此方法等后面讲解了gulp.src()再做演示）
gulp.task('one',function(cb){
var stream = gulp.src('client/**/*.js')
.pipe(dosomething()) //dosomething()中有某些异步操作
.pipe(gulp.dest('build'));
return stream;
});
gulp.task('two',['one'],function(){
console.log('two is done');
});（3）返回一个promise对象
此方法用到一个异步处理的库q，所以需要先进行安装npm install --save-dev q。然后按照下面代码执行
var Q = require('q');
gulp.task('one',function(cb){
var deferred = Q.defer();
// 做一些异步操作
setTimeout(function() {
deferred.resolve();
}, 5000);
return deferred.promise;
});
gulp.task('two',['one'],function(){
console.log('two is done');
});3.2 gulp.src()
而在Gulp中，使用的是Nodejs中的stream(流)，首先获取到需要的stream，然后可以通过stream的pipe()方法把流导入到你想要的地方，比如Gulp的插件中，经过插件处理后的流又可以继续导入到其他插件中，当然也可以把流写入到文件中。
所以Gulp是以stream为媒介的，它不需要频繁的生成临时文件，这也是Gulp的速度比Grunt快的一个原因。
而gulp.src()方法正是用来获取流的，但要注意这个流里的内容不是原始的文件流，而是一个虚拟文件对象流(Vinyl files)，这个虚拟文件对象中存储着原始文件的路径、文件名、内容等信息。可以简单的理解为：这个方法是用来读取需要操作的文件。
其语法：
gulp.src(globs[, options])- @param {string} globs 文件匹配模式（类似正则表达式）。用来匹配文件路径(包括文件名)，当然这里也可以直接指定某个具体的文件路径。当有多个匹配模式时，该参数可以为一个数组。
- @param {array} options 通常情况下我们不需要用到。
Gulp内部使用了node-glob模块来实现其文件匹配功能。我们可以使用下面这些特殊的字符来匹配我们想要的文件：
符号 | 描述 |
|---|---|
* | 匹配文件路径中的0个或多个字符，但不会匹配路径分隔符，除非路径分隔符出现在末尾 |
** | 匹配路径中的0个或多个目录及其子目录,需要单独出现，即它左右不能有其他东西了。如果出现在末尾，也能匹配文件。 |
? | 匹配文件路径中的一个字符(不会匹配路径分隔符) |
[...] | 匹配方括号中出现的字符中的任意一个，当方括号中第一个字符为^或!时，则表示不匹配方括号中出现的其他字符中的任意一个，类似js正则表达式中的用法 |
!(pattern|pattern|pattern) | 匹配任何与括号中给定的任一模式都不匹配的 |
?(pattern|pattern|pattern) | 匹配括号中给定的任一模式0次或1次，类似正则的(pattern|pattern|pattern)? |
(pattern|pattern|pattern) | 匹配括号中给定的任一模式至少1次，类似正则的(pattern|pattern|pattern) |
*(pattern|pattern|pattern) | 匹配括号中给定的任一模式0次或多次，类似正则的(pattern|pattern|pattern)* |
@(pattern|pattern|pattern) | 匹配括号中给定的任一模式1次，类似正则的(pattern|pattern|pattern) |
比如：
-
*能匹配a.js,x.y,abc,abc/, 但不能匹配a/b.js; -
*.*能匹配a.js,style.css,a.b,x.y -
*/*/*.js能匹配a/b/c.js,x/y/z.js, 不能匹配a/b.js,a/b/c/d.js -
**能匹配abc,a/b.js,a/b/c.js,x/y/z,x/y/z/a.b, 能用来匹配所有的目录和文件 -
**/*.js能匹配foo.js,a/foo.js,a/b/foo.js,a/b/c/foo.js -
a/**/z能匹配a/z,a/b/z,a/b/c/z,a/d/g/h/j/k/z -
a/**b/z能匹配a/b/z,a/sb/z,但不能匹配a/x/sb/z, 因为只有单**单独出现才能匹配多级目录 -
?.js能匹配a.js,b.js,c.js -
a??能匹配a.b,abc,但不能匹配ab/, 因为它不会匹配路径分隔符 -
[xyz].js只能匹配x.js,y.js,z.js, 不会匹配xy.js,xyz.js等, 整个中括号只代表一个字符 -
[^xyz].js能匹配a.js,b.js,c.js等,不能匹配x.js,y.js,z.js.
当有多种匹配模式时可以使用数组:
代码语言：javascript复制//使用数组的方式来匹配多种文件
gulp.src(['js/*.js','css/*.css','*.html'])使用数组的方式还有一个好处就是可以很方便的使用排除模式，在数组中的单个匹配模式前加上!即是排除模式，它会在匹配的结果中排除这个匹配，要注意一点的是不能在数组中的第一个元素中使用排除模式:
代码语言：javascript复制gulp.src(['*.js', '!b*.js']) //匹配所有js文件，但排除掉以b开头的js文件
gulp.src(['!b*.js', '*.js']) //不会排除任何文件，因为排除模式不能出现在数组的第一个元素中展开模式
展开模式以花括号作为定界符，根据它里面的内容，会展开为多个模式，最后匹配的结果为所有展开的模式相加起来得到的结果。展开的例子如下：
-
a{b,c}d会展开为abd,acd -
a{b,}c会展开为abc,ac -
a{0..3}d会展开为a0d,a1d,a2d,a3d -
a{b,c{d,e}f}g会展开为abg,acdfg,acefg -
a{b,c}d{e,f}g会展开为abdeg,acdeg,abdeg,abdfg
3.3 gulp.dest()
gulp.dest()方法是用来写文件的，其语法为：
代码语言：javascript复制gulp.dest(path[,options])- @param {string} path 写入文件的路径
- @param {} options 可选的参数对象，通常用不到
gulp的使用流程：
- 通过gulp.src()方法获取到我们想要处理的文件流，
- 把文件流通过pipe方法导入到gulp的插件中，
- 把经过插件处理后的流再通过pipe方法导入到gulp.dest()中，
- gulp.dest()方法则把流中的内容写入到文件中。
注意： 给gulp.dest()传入的路径参数，只能用来指定要生成的文件的目录，而不能指定生成文件的文件名。生成的文件名是由导入到它的文件流决定的，即使我们给它传入一个带有文件名的路径参数，它也会把这个文件名当做是目录名，例如：
代码语言：javascript复制var gulp = require('gulp');
gulp.src('script/jquery.js')
.pipe(gulp.dest('dist/foo.js'));
//最终生成的文件路径为 dist/foo.js/jquery.js,而不是dist/foo.js如果确实有改变文件名的需要，可以使用插件gulp-rename
gulp.dest() 详解路径参数
gulp.dest(path) 生成的文件路径是我们传入的path参数后面再加上 gulp.src() 中有通配符开始出现的那部分路径。
var gulp = reruire('gulp');
//有通配符开始出现的那部分路径为 **/*.js
gulp.src('script/**/*.js')
.pipe(gulp.dest('dist')); //最后生成的文件路径为 dist/**/*.js
//如果 **/*.js 匹配到的文件为 jquery/jquery.js ,则生成的文件路径为 dist/jquery/jquery.js
//没有通配符出现的情况
gulp.src('script/avalon/avalon.js')
.pipe(gulp.dest('dist')); //最后生成的文件路径为 dist/avalon.js
//有通配符开始出现的那部分路径为 **/underscore.js
gulp.src('script/**/underscore.js')
//假设匹配到的文件为script/util/underscore.js
.pipe(gulp.dest('dist')); //则最后生成的文件路径为 dist/util/underscore.js
//有通配符出现的那部分路径为 *
gulp.src('script/*')
//假设匹配到的文件为script/zepto.js
.pipe(gulp.dest('dist')); //则最后生成的文件路径为 dist/zepto.js关于src和dest举几个栗子
case1
我们在 demo0927 文件加下，新建一个demofile文件夹，并再继续建立file1文件夹，然后再file1里面新建几个文件，具体文件结构如下：
文件结构
现在，要将demo0927/demofile/file1 的所有文件都倒腾到 demo3927/destfile/file1中。操作如下：
/** case1 要将 demo0927/demofile/file1 的所有文件都倒腾到 demo3927/destfile/file1中 */
var gulp = require('gulp');
gulp.task('default',function() {
// 使用 ** 用来匹配所有的目录和文件。
gulp.src(['demofile/**'])
.pipe(gulp.dest('destfile'));
});通过执行 gulp 命令，就可以看到再demo0927 会自己创建文件件destfile，并且已有一个完整的file1在里头了。
构建后结果
case2
那如果希望只是倒腾源码文件（即html、js、css，但不移动txt文件）呢？把结果存储在file1_2的文件夹中 我们可以采用下面的方式：
代码语言：javascript复制/** case2 要将 demo0927/demofile/file1 的所有源码文件（即html、js、css）都倒腾到 demo3927/destfile/file1_2中 */
var gulp = require('gulp');
gulp.task('default',function() {
// 使用 '!**/*.txt' 来剔除txt文件。
gulp.src(['demofile/file1/**', '!**/*.txt'])
.pipe(gulp.dest('destfile/file1_2'));
});结果就不会有txt文件了：
构建后的结果file1_2没有txt文件
3.3 gulp.watch()
gulp.watch() 用来监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务，例如文件压缩等。其语法为
gulp.watch(glob[, opts], tasks)- @param {string|array} glob 为要监视的文件匹配模式，规则和用法与gulp.src()方法中的glob相同。
- @param {} opts 可选的参数对象，通常用不到
- @param {array} tasks 为文件变化后要执行的任务，为一个数组
gulp.task('uglify',function(){
//do something
});
gulp.task('reload',function(){
//do something
});
gulp.watch('js/**/*.js', ['uglify','reload']);gulp.watch()还有另外一种使用方式：
代码语言：javascript复制gulp.watch(glob[, opts, cb])- glob和opts参数与第一种用法相同
- @param {function} cb 为为一个函数。每当监视的文件发生变化时，就会调用这个函数,并且会给它传入一个对象，该对象包含了文件变化的一些信息：
（1）type 属性为变化的类型，可以是
added,changed,deleted； （2）path 属性为发生变化的文件的路径.
gulp.watch('js/**/*.js', function(event){
console.log(event.type); //变化类型 added为新增,deleted为删除，changed为改变
console.log(event.path); //变化的文件的路径
}); 这个方法栗子我们后面再举例。。。。。
4. 一些常用的gulp插件
前面学习了gulp.task() gulp.src() gulp.dest()，但感觉好像没有发挥太大作用，因为只是搬运文件而已，中间没有对文件做任何处理。想要对文件做处理（比如重命名、比如压缩……）就需要引入插件。
下面介绍几种常用的插件。（注意：使用插件前，需要先安装插件npm install xxxx）
4.1 重命名 gulp-rename
gulp-rename 可以用来重命名文件流中的文件。前面提到的gulp.dest()方法写入文件时，文件名使用的是文件流中的文件名，如果想要改变文件名，就需要用gulp-rename插件来改变文件流中的文件名。
安装插件：npm install --save-dev gulp-rename
case： 要将 demo0927/demofile/file1/readme.txt 文件重命名后放置 demo3927/destfile/file1_rename中。
代码语言：javascript复制var gulp = require('gulp'),
rename = require('gulp-rename');
gulp.task('rename',function() {
gulp.src(['demofile/file1/readme.txt'])
.pipe(rename('请提前阅读该文档.txt'))
.pipe(gulp.dest('destfile/file1_rename'));
});
操作结果
4.2 js文件压缩 gulp-uglify
使用gulp-uglify用来压缩js文件，使用的是uglify引擎。
安装插件：npm install --save-dev gulp-uglify
case： 要将 demo0927/demofile/file1 所有js文件压缩重命名为带有min后缀的文件后，放置 demo3927/destfile/file1_uglify中。
代码语言：javascript复制var gulp = require('gulp'),
rename = require('gulp-rename'),
uglify = require('gulp-uglify');
gulp.task('default',function() {
gulp.src('demofile/file1/js/index.js') // 要压缩的js文件
.pipe(uglify()) // 使用uglify进行压缩
.pipe(rename('index.min.js'))
.pipe(gulp.dest('destfile/file1_uglify'));
});
js压缩后和压缩前的代码格式，真心蛮好用的。
4.3 css文件压缩 gulp-minify-css
使用gulp-minify-css压缩css文件.
安装：npm install --save-dev gulp-minify-css
case 将 demo0927/demofile/file1 的css文件压缩重命名为带有min后缀的文件后，放置 demo3927/destfile/file1_miifyCss中
代码语言：javascript复制var gulp = require('gulp'),
rename = require('gulp-rename'),
minifyCss = require('gulp-minify-css');
gulp.task('default',function() {
gulp.src('demofile/file1/css/index.css') // 要压缩的文件
.pipe(minifyCss())
.pipe(rename('index.min.css'))
.pipe(gulp.dest('destfile/file1_minifyCss'));
});
css 压缩后和压缩前的代码格式
4.4 html文件压缩 gulp-minify-html
使用gulp-minify-html用来压缩html文件
安装：npm install --save-dev gulp-minify-html
case 将 要将 demo0927/demofile/file1 的html文件压缩后，放置 demo3927/destfile/file1_miifyHtml中
代码语言：javascript复制var gulp = require('gulp'),
minifyHtml = require('gulp-minify-html');
gulp.task('default',function() {
gulp.src('demofile/file1/index.html') // 要压缩的文件
.pipe(minifyHtml())
.pipe(gulp.dest('destfile/file1_minifyHtml'));
});结果如下：
html 压缩后和压缩前的代码格式
4.5 js代码检查 gulp-jshint
使用gulp-jshint用来检查js代码。
安装：npm install --save-dev gulp-jshint
注意：安装gulp-jshint之前，需要先安装jshint，
npm install --save-dev jshint不然会有如下报错：
未安装jshint时，安装gulp-jshint会提示安装依赖
case: 假设在index.js文件中随便制作一个错误，如下在line9敲入无意义字段“aaa”:
index.js
然后写入gulp任务，执行即可看到输出的错误提示（如果没有错误，就不会报错提示）。
代码语言：javascript复制var gulp = require('gulp'),
jshint = require("gulp-jshint");
gulp.task('jsLint', function () {
gulp.src('js/*.js')
.pipe(jshint())
.pipe(jshint.reporter()); // 输出检查结果
});
jshint
4.5 js代码检查 gulp-concat
这个很好用，可以合并js或css文件，减少资源请求。
使用gulp-concat用来检查js代码。
安装：npm install --save-dev gulp-concat
case: 要将 demo0927/demofile/file1 的js文件合并，放置 demo3927/destfile/file1_concat/js中:
代码语言：javascript复制var gulp = require('gulp'),
concat= require('gulp-concat');
gulp.task('default',function() {
gulp.src('demofile/file1/js/*.js')
.pipe(concat('file1.js'))
.pipe(gulp.dest('destfile/file1_concat/js')); // 输出检查结果
});5 结语
Gulp的插件举例就到此为止了。更多可以参gulpjs官网检索。
参考资料： 前端构建工具gulpjs的使用介绍及技巧
