Gulp是前端构建工具，使用起来相对比较简单（听别人说的，个人还没有多个工具体验经验）。
依个人理解，结合上gulp插件，它能 minify js``css``html文件，还能合并文件减少资源请求，也可以压缩图片等等。

1. 安装

一般在全局安装后，还需要再项目中本地安装一次，以便版本的灵活性。

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，并写入以下代码：

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写入以下代码：

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不会等待所依赖的异步任务完成；而是直接执行后续任务。

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这个异步任务已经完成,这个回调函数就是任务函数的第一个参数。

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)

比如：

1. * 能匹配 a.js, x.y , abc , abc/ , 但不能匹配 a/b.js;
2. *.* 能匹配 a.js , style.css , a.b , x.y
3. */*/*.js 能匹配 a/b/c.js , x/y/z.js , 不能匹配 a/b.js, a/b/c/d.js
4. ** 能匹配abc , a/b.js , a/b/c.js , x/y/z , x/y/z/a.b , 能用来匹配所有的目录和文件
5. **/*.js 能匹配 foo.js , a/foo.js , a/b/foo.js , a/b/c/foo.js
6. a/**/z 能匹配 a/z , a/b/z , a/b/c/z , a/d/g/h/j/k/z
7. a/**b/z 能匹配 a/b/z , a/sb/z ,但不能匹配a/x/sb/z , 因为只有单**单独出现才能匹配多级目录
8. ?.js 能匹配 a.js , b.js , c.js
9. a?? 能匹配 a.b , abc ,但不能匹配 ab/ , 因为它不会匹配路径分隔符
10. [xyz].js 只能匹配 x.js , y.js , z.js , 不会匹配 xy.js, xyz.js 等, 整个中括号只代表一个字符
11. [^xyz].js 能匹配 a.js , b.js , c.js 等,不能匹配 x.js , y.js , z.js.

当有多种匹配模式时可以使用数组:

//使用数组的方式来匹配多种文件
gulp.src(['js/*.js','css/*.css','*.html'])

使用数组的方式还有一个好处就是可以很方便的使用排除模式，在数组中的单个匹配模式前加上!即是排除模式，它会在匹配的结果中排除这个匹配，要注意一点的是不能在数组中的第一个元素中使用排除模式:

gulp.src(['*.js', '!b*.js']) //匹配所有js文件，但排除掉以b开头的js文件
gulp.src(['!b*.js', '*.js']) //不会排除任何文件，因为排除模式不能出现在数组的第一个元素中

展开模式

展开模式以花括号作为定界符，根据它里面的内容，会展开为多个模式，最后匹配的结果为所有展开的模式相加起来得到的结果。展开的例子如下：

1. a{b,c}d 会展开为 abd , acd
2. a{b,}c 会展开为 abc , ac
3. a{0..3}d 会展开为 a0d , a1d , a2d , a3d
4. a{b,c{d,e}f}g 会展开为 abg , acdfg , acefg
5. a{b,c}d{e,f}g 会展开为 abdeg , acdeg , abdeg , abdfg

3.3 gulp.dest()

gulp.dest()方法是用来写文件的，其语法为：

gulp.dest(path[,options])

• @param {string} path 写入文件的路径
• @param {} options 可选的参数对象，通常用不到

gulp的使用流程：

1. 通过gulp.src()方法获取到我们想要处理的文件流，
2. 把文件流通过pipe方法导入到gulp的插件中，
3. 把经过插件处理后的流再通过pipe方法导入到gulp.dest()中，
4. gulp.dest()方法则把流中的内容写入到文件中。

注意： 给gulp.dest()传入的路径参数，只能用来指定要生成的文件的目录，而不能指定生成文件的文件名。生成的文件名是由导入到它的文件流决定的，即使我们给它传入一个带有文件名的路径参数，它也会把这个文件名当做是目录名，例如：

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的文件夹中
我们可以采用下面的方式：

/** 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()还有另外一种使用方式：

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中。

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中。

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中

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中

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任务，执行即可看到输出的错误提示（如果没有错误，就不会报错提示）。

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中:

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的使用介绍及技巧