什么是gulp

• Gulp.js 是一个自动化构建工具，开发者可以使用它在项目开发过程中自动执行常见任务。
• Gulp.js 是基于 Node.js 构建的，利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。
• Gulp.js 源文件和你用来定义任务的 Gulp 文件都是通过 JavaScript（或者 CoffeeScript ）源码来实现的。

安装

Gulp需要全局安装，然后再在项目的开发目录中安装为本地模块。
先进入项目目录，运行下面的命令。

npm install -g gulp

npm install --save-dev gulp

gulpfile.js

项目根目录中的gulpfile.js，是Gulp的配置文件。
下面就是一个典型的gulpfile.js文件。

var gulp = require('gulp');
var uglify = require('gulp-uglify');

gulp.task('minify', function () {
  gulp.src('js/app.js')
    .pipe(uglify())
    .pipe(gulp.dest('build'))
});

上面代码中，gulpfile.js加载gulp和gulp-uglify模块之后，使用gulp模块的task方法指定任务minify。

gulp模块的方法

gulp.src( )

gulp模块的src方法，用于产生数据流。
它的参数表示所要处理的文件，这些指定的文件会转换成数据流。

参数的写法一般有以下几种形式：

js/app.js：指定确切的文件名。
js/*.js：某个目录所有后缀名为js的文件。
js/**/*.js：某个目录及其所有子目录中的所有后缀名为js的文件。
!js/app.js：除了js/app.js以外的所有文件。

gulp.src('client/js/**/*.js') 
  .pipe(minify())
  .pipe(gulp.dest('build'));

src方法的参数还可以是一个数组，用来指定多个成员。

gulp.src(['js/**/*.js', '!js/**/*.min.js'])

gulp.dest( )

dest方法将管道的输出写入文件，同时将这些输出继续输出，所以可以依次调用多次dest方法，将输出写入多个目录。
如果有目录不存在，将会被新建。

gulp.src('./client/templates/*.jade')
  .pipe(jade())
  .pipe(gulp.dest('./build/templates'))
  .pipe(minify())
  .pipe(gulp.dest('./build/minified_templates'));

gulp.task（）

task方法用于定义具体的任务。它的第一个参数是任务名，第二个参数是任务函数。

gulp.task('somename', function() {
  // 做一些事
});

task方法还可以指定按顺序运行的一组任务。

gulp.task('build', ['css', 'js', 'imgs']);

上面代码先指定build任务，它由css、js、imgs三个任务所组成，task方法会并发执行这三个任务。
注意，由于每个任务都是异步调用，所以没有办法保证js任务的开始运行的时间，正是css任务运行结束。

如果希望各个任务严格按次序运行，可以把前一个任务写成后一个任务的依赖模块。

gulp.task('css', ['greet'], function () {
   // Deal with CSS here
});

上面代码表明，css任务依赖greet任务，所以css一定会在greet运行完成后再运行。

gulp.task('testLess', function () {
    return gulp.src(['less/style.less'])
        .pipe(less())
        .pipe(gulp.dest('./css'));
});

gulp.task('minicss', ['testLess'], function () { //执行完testLess任务后再执行minicss任务
    gulp.src(['css/*.css'])
        .pipe(minifyCss())
        .pipe(gulp.dest('./dist/css'));
});

可以看到，minicss任务依赖于先执行的testLess任务，因此在testLess任务中应该返回当前任务的事件流，这就是为什么testLess任务中要return。

如果一个任务的名字为default，就表明它是“默认任务”，在命令行直接输入gulp命令，就会运行该任务。

gulp.task('default', function () {
  // Your default task
});

// 或者

gulp.task('default', ['styles', 'jshint', 'watch']);

执行的时候，直接使用gulp，就会运行styles、jshint、watch三个任务。

gulp.watch（）

watch方法用于指定需要监视的文件。一旦这些文件发生变动，就运行指定任务。

gulp.task('watch', function () {
   gulp.watch('templates/*.tmpl.html', ['build']);
});

上面代码指定，一旦templates目录中的模板文件发生变化，就运行build任务。

• glob：必填，需要处理的源文件匹配符路径
• tasks：数组，需要在文件变动后执行的一个或者多个任务

watch方法也可以用回调函数，代替指定的任务

gulp.watch('templates/*.tmpl.html', function (event) {
   console.log('Event type: ' + event.type);
   console.log('Event path: ' + event.path);
});

回调函数会被传入一个名为 event 的对象。这个对象描述了所监控到的变动：

• event.type：发生的变动的类型：added, changed 或者 deleted。
• event.path：触发了该事件的文件的路径。

另一种写法是watch方法所监控的文件发生变化时（修改、增加、删除文件），会触发change事件。可以对change事件指定回调函数。

var watcher = gulp.watch('templates/*.tmpl.html', ['build']);

watcher.on('change', function (event) {
   console.log('Event type: ' + event.type);
   console.log('Event path: ' + event.path);
});

gulp-load-plugins模块

一般情况下，gulpfile.js中的模块需要一个个加载。

var gulp = require('gulp'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat');

gulp.task('js', function () {
   return gulp.src('js/*.js')
      .pipe(jshint())
      .pipe(jshint.reporter('default'))
      .pipe(uglify())
      .pipe(concat('app.js'))
      .pipe(gulp.dest('build'));
});

上面代码中，除了gulp模块以外，还加载另外三个模块。

这种一一加载的写法，比较麻烦。使用gulp-load-plugins模块，可以加载package.json文件中所有的gulp模块。
上面的代码用gulp-load-plugins模块改写，就是下面这样：

var gulp = require('gulp'),
    gulpLoadPlugins = require('gulp-load-plugins'),
    plugins = gulpLoadPlugins();

gulp.task('js', function () {
   return gulp.src('js/*.js')
      .pipe(plugins.jshint())
      .pipe(plugins.jshint.reporter('default'))
      .pipe(plugins.uglify())
      .pipe(plugins.concat('app.js'))
      .pipe(gulp.dest('build'));
});

一些实用插件

很多插件帮我们实现了诸如删除文件，编译sass，minifyCSS，丑化js等操作……

• del：删除文件
• sass：编译sass
• autoprefixer：根据设置浏览器版本自动处理浏览器前缀。
• browserSync: 让浏览器实时、快速响应文件更改（html、js、css、sass、less等）并自动刷新页面。
• rename：重命名
• concat：合并js文件
• minifycss：压缩css
• uglify：丑化压缩js
• runSequence：同时进行几个任务
• order：给需要合并的js文件排序

gulp.task('dev:js', function () {
  // Front JS
  gulp.src([config.devDir + '/js/common/*.js', '!' + config.devDir + '/js/common/front.js'])
      .pipe(order([
        'configure.js',
        '*.js'
      ]))
      .pipe(concat('front.js'))
      .pipe(gulp.dest(config.devDir + '/js/common'));
});

参考文章：
Gulp：任务自动管理工具