前端构建工具gulpjs

1、安装

npm install gulp // 在要使用gulp的项目中安装gulp
//如果想在安装的时候把gulp写进项目package.json文件的依赖中，可以加上--save-dev
npm install --save-dev gulp

2、 建立gulpfile.js文件

在项目根目录新建一个名为gulpfile.js的文件，之后在文件中定义要构建的任务

//例如，定义一个默认的任务
var gulp = require('gulp');
gulp.task('default', function() {
     console.log('hello world');
})

要运行gulp任务，只需要进入项目根目录，在命令行中执行 gulp 命令，gulp后面可以加上要执行的任务名，例如 gulp task1，如果没有指定任务名，默认执行名为default的默认任务

3、API的使用

在gulp中，使用的是Nodejs中的stream（流），首先获取到需要的stream，可以通过stream的 pipe() 方法把流导入到文件中。
gulp.src() 方法是用来获取流的，但是这个流里的内容不是原始的文件流，而是一个虚拟文件对象流，这个虚拟文件对象中存储着原始文件的路径、文件名、内容等信息。

/*
 * 参数globs是文件匹配模式（类似正则表达式），用来匹配文件路径（包括文件名）
 * options是可选参数 
*/
gulp.src(globs[, options])
// 当有多种匹配模式时可以使用数组
gulp.src(['js/*.js','css/*.css','*.html'])
gulp.src([*.js, '!b*.js']) // 匹配所有js文件，但排除以b开头的js文件

gulp.dest() 是用来写文件的
gulp的使用流程一般是首先通过gulp.src()方法获取到要处理的文件流，然后把文件流通过pipe方法导入到gulp的插件中，最后把经过插件处理后的流再通过pipe方法导入到gulp.dest()中。
gulp.dest()方法是把流中的内容写入到文件中，给gulp.dest()传入的路径参数，只能用来指定要生成的文件的目录，而不能指定生成文件的文件名。生成的文件名是由导入到它的文件流决定的

// 语法
gulp.dest(path[, options])
// 示例
var gulp = require('gulp');
gulp.src('script/jquery.js')
       .pipe(gulp.dest('dist/foo.js'));
// 最终生成的文件路径为dist/foo.js/jquery.js，而不是dist/foo.js

gulp.task() 用来定义任务

// 语法
/*
* name ： 任务名
* deps：是当前定义的任务需要依赖的其他任务，为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行
* fn ： 任务函数
*/
gulp.task(name[, deps], fn)
// 示例
gulp.task('myTask', ['array', 'of', 'task', 'names'], function() {
  // do something
})

如果某个任务所依赖的任务是异步的，gulp 并不会等待那个所依赖的异步任务完成，而是会接着执行后续的任务，其中一种解决方法：

var Q = require('q'); //一个著名的异步处理的库 https://github.com/kriskowal/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');
});

gulp.watch() 用来监视文件的变化，当文件发生变化后，可以利用它来执行相应的任务

//语法
/*
* glob : 为要监视的文件匹配模式，规则和用法与gulp.src()方法中的glob相同
* opts : 为一个可选的配置对象，通常不需要用到
* tasks : 为文件变化后要执行的任务
*/
gulp.task('uglify', function() {
  // do something
})
gulp.task('reload', function() {
   // do something
})
gulp.watch('js/**/*.js', ['uglify', 'reload'])

gulp.watch('js/**/*.js', function(event){
    console.log(event.type); //变化类型 added为新增,deleted为删除，changed为改变 
    console.log(event.path); //变化的文件的路径
});