Gulp与Grunt一样，也是一个自动任务运行器。它充分借鉴了Unix操作系统的管道（pipe）思想，在操作上，它要比Grunt简单。

gulp

安装

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

$ npm install -g gulp
$ npm install --save-dev gulp

gulpfile.js

项目根目录中的gulpfile.js，是Gulp的配置文件。它大概是下面的样子。

var gulp = require('gulp');
gulp.task('default', function () {
});

举个栗子，我们要实现js的压缩。

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

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

上面代码中使用了gulp-uglify模块。在此之前，需要先安装这个模块。

记住在安装之前先 运行 npm init 来生成package.json，如果已经有了就不需要这一步了。

npm install --save-dev gulp-uglify

Tips： –save-dev 会将 gulp-uglify 自动添加到package.json的devDependencies中；

gulpfile.js加载gulp和gulp-uglify模块之后，使用gulp模块的task方法指定任务。task方法有两个参数，第一个是任务名，第二个是任务函数。在任务函数中，使用gulp模块的src方法，指定所要处理的文件，然后使用pipe方法，将上一步的输出转为当前的输入，进行链式处理。

在上面代码中，使用两次pipe方法，也就是说做了两种处理。第一种处理是使用gulp-uglify模块，压缩源码；第二种处理是使用gulp模块的dest方法，将上一步的输出写入本地文件，这里是app.min.js（代码中省略了后缀名js）。

从上面的例子中可以看到，gulp充分使用了“管道”思想，就是一个数据流（stream）：src方法读入文件产生数据流，dest方法将数据流写入文件，中间是一些中间步骤，每一步都对数据流进行一些处理。

gulp.src()

gulp模块的src方法，用于产生数据流。它的参数表示所要处理的文件，一般有以下几种形式。

  • js/app.js：指定确切的文件名。
  • js/*.js：某个目录所有后缀名为js的文件。
  • js/*/.js：某个目录及其所有子目录中的所有后缀名为js的文件。
  • !js/app.js：除了js/app.js以外的所有文件。
  • *.+(js|css)：匹配项目根目录下，所有后缀名为js或css的文件。

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

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

##gulp.task()

gulp模块的task方法，用于定义具体的任务。它的第一个参数是任务名，第二个参数是任务函数。下面是一个非常简单的任务函数。

gulp.task('test', function () {
   console.log('就测试下。');
});

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

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

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

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

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

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

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

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

##gulp.watch()

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

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

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

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

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

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

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

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

除了change事件，watch方法还可能触发以下事件。

  • end：回调函数运行完毕时触发。
  • error：发生错误时触发。
  • ready：当开始监听文件时触发。
  • nomatch：没有匹配的监听文件时触发。

watcher对象还包含其他一些方法。

  • watcher.end()：停止watcher对象，不会再调用任务或回调函数。
  • watcher.files()：返回watcher对象监视的文件。
  • watcher.add(glob)：增加所要监视的文件，它还可以附件第二个参数，表示回调函数。
  • watcher.remove(filepath)：从watcher对象中移走一个监视的文件。

##gulp实现自动刷新 - gulp-livereload

gulp-livereload模块用于自动刷新浏览器，反映出源码的最新变化。它除了模块以外，还需要在浏览器中安装插件，用来配合源码变化。

var gulp = require('gulp'),
    livereload = require('gulp-livereload');

gulp.task('watch', function () {
    livereload.listen();
    gulp.watch(['./asset/**/*.*','./templates/**/*.*'], function (file) {
        livereload.changed(file.path);
    });
});

上面代码监视asset和templates下的任何文件，一旦有变化，就自动刷新浏览器。

Tips: 调试css 很方遍，因为刷新css 不需要刷新这个页面，只需要重新加载css即可，赶紧双屏幕，三屏幕搞起来；代码敲得飞起。

还有很多实用的插件 可以到 NpmJs.org 去找。