gulp初识

什么是gulp?

Gulp是一个基于流构建系统，它能通过自动执行常见任务，比如编译预处理CSS，压缩JavaScript和刷新浏览器，来改进网站开发的过程。

Gulp本身虽然不能完成很多任务，但它有大量插件可用，开发者可以访问插件页面或者在npm搜索gulpplugin就能看到。例如，有些插件可以用来执行JSHint、编译CoffeeScript，执行Mocha测试，甚至更新版本号。

安装gulp

尽管可以全局安装gulp　　
npm install gulp -g

但是更好的做法是在项目根目录下单独安装。
npm install gulp --save-deg

这种方法比全局安装要好，因为用到的 gulp 的版本只和当前项目相关。运行的时候，在windows版本下，需要进入node_modules/.bin 目录运行gulp，它会找到你项目根目录下的gulpfile.js文件并执行。如果觉得进入这个目录麻烦，那么可以在 package.json 中得 scripts 段落添加诸如 {“build”: “gulp” }，然后每次在项目目录执行 npm run build 即可。npm 运行脚本时，会自动到 ./node_modules/.bin 下查找对应的可执行文件。
　　

"scripts": {
   "build": "gulp"
 },

gulp的使用

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

gulp.task('default', function () { // 定义默认执行的任务!
  gulp.src('js/*.js') // 作为流输入
    .pipe(uglify()) // 代码丑化（压缩）
    .pipe(concat('all.min.js')) // 将多个文件连接成一个文件
    .pipe(gulp.dest('build')); // 输出到目的文件路径
})

不要忘了npm install gulp-uglify gulp-concat --save-dev

在下载相关模块之后，执行了一个default任务。执行时调用函数。这个函数作为gulp.task()的第二个参数。

然后，也是难点所在。

gulp.src('js/*.js') // 作为流输入
    .pipe(uglify()) // 代码丑化（压缩）
    .pipe(concat('all.min.js')) // 将多个文件连接成一个文件
    .pipe(gulp.dest('build')); // 输出到目的文件路径

流

gulp.src()是基于流的构建工具，流既可以用做输入，也可作为输出。

gulp.src()接受一个glob(比如匹配一个或多个文件的字符串)或者一个数组作为输入参数。返回创建对象流代表这些文件。这个流是它的输出也作为uglify()的输入，再经过concat()后返回一个新压缩源文件的流，最后输出的all.min.js被输入gulp.dest()函数并保存。

gulp.src

gulp.src()使用node-glob规则从指定的glob里获取文件。

js/index.js：精确匹配
js/*.js： 匹配js目录下的所有js
js/inde?.js：匹配js目录下的inde开头后面只有一个字符的文件。js/index.js，js/indez.js…
js/**/*.js：**匹配0个或更多的目录和子目录。但不匹配以.开头的目录。js/.sys/index.js
!js/**/*.min.js：不匹配min.js。

更多查看node-glob

gulp.task

gulp.task()用来定义任务。

如果在控制台中没有指定执行的任务，那么它会执行默认任务gulp.task('default')。即npm run build默认是npm run build default。

比如任务a，

gulp.task('a', function () { console.log('a'); })

执行时npm run build a。

任务依赖

在执行多个任务时，想要定义任务的先后顺序，可以，

gulp.task('default', ['a', 'b']);

这样的话，任务default会在任务a，b执行完成之后才会执行。
但是要注意的是，任务a和任务b执行的先后顺序是不能保证的。如果要保证数组中任务的执行顺序，那么可以，

var gulp = require('gulp');

// 返回一个 callback，因此系统可以知道它什么时候完成
gulp.task('one', function(cb) {
    // 做一些事 -- 异步的或者其他的
    cb(err); // 如果 err 不是 null 或 undefined，则会停止执行，且注意，这样代表执行失败了
});

// 定义一个所依赖的 task 必须在这个 task 执行之前完成
gulp.task('two', ['one'], function() {
    // 'one' 完成后
});

gulp.task('default', ['one', 'two']);

监听文件

gulp.watch()返回一个watcher。用来监听文件。这样当我们在监听的文件上做改动的时候运行一个或多个任务。使用gulp.watch()方法可以监听文件，它接受一个glob或者glob数组（和gulp.src()一样）以及一个任务数组来执行回调。

 watcher.on('change', function (event) { 
   console.log('Event type: ' + event.type); // added, changed, or deleted 
   console.log('Event path: ' + event.path); // The path of the modified file 
 });

最后

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

gulp.task('default', function () {
  gulp.src(['js/**/*.js', '!js/**/*.min.js']) // 作为流输入
    .pipe(jshint()) // 规范代码格式
    .pipe(jshint.reporter('default')) // gulp-jshint:https://github.com/spalger/gulp-jshint
    .pipe(uglify()) // 代码丑化（压缩）
    .pipe(concat('all.min.js')) // 将多个文件连接成一个文件
    .pipe(gulp.dest('build')); // 输出到目的文件路径
  var watcher = gulp.watch('js/**/index.js', ['build2']);
  watcher.on('change', function (event) { 
    console.log('Event type: ' + event.type); // added, changed, or deleted 
    console.log('Event path: ' + event.path); // The path of the modified file 
  }); 
})

参考

http://www.imooc.com/article/2364