Gulp笔记
http://www.cnblogs.com/2050/p/4198792.html
前期
npm init // 生成package.json
npm install -g gulp // 先在全局安装gulp
npm install gulp// 再在项目中安装gulp，如果想把依赖写进package.json，加上--save-dev
通常都是这样操作，至于为什么，可能是为了版本的灵活性
原理
gulp中使用的是node的stream（流），是以stream为媒介
先读取需要的stream，通过stream的pipe()方法导入到想要的地方，比如插件等，经过插件处理过的流可以继续导入到其他地方，包括写入到文件中
流程
先通过gulp.src()方法获取到我们想要处理的文件流，然后把文件流通过pipe方法导入到gulp的插件中，最后把经过插件处理后的流再通过pipe方法导入到gulp.dest()中，gulp.dest()方法则把流中的内容写入到文件中
使用
gulpfile.js
匹配规则
* // 0个或多个字符，可匹配a.js、a/，但是不能a/b.js ** // 0个或多个目录、子目录，若末尾也可以匹配文件，可匹配a/b/c、a/b/c/d.js ? // 匹配一个字符，不会匹配路径分隔符 [...] // 括号内任意一个字符，注意也是只匹配一个字符而已 !(p1|p2|p3) // 匹配任何与括号中给定的任一模式都不匹配的，传说中的“排除模式” ?(p1|p2|p3) // 匹配括号中给定的任一模式0次或1次 +(p1|p2|p3) // 匹配括号中给定的任一模式至少1次 *(p1|p2|p3) // 匹配括号中给定的任一模式0次或多次 @(p1|p2|p3) // 匹配括号中给定的任一模式1次
API
gulp.src
获取流，即读取我们要操作的文件
gulp.src(globs[, options]) // globs为文件匹配模式，匹配文件路径，多个匹配模式时可用数组，options一般用不到
gulp.dest
写文件
gulp.dest(path[,options]) // path为写入文件的路径，options一般用不到
注意点：传入的路径只能用来指定要生成的文件的目录，而不能指定生成文件的文件名，生成的文件名是由导入到它的文件流决定的
关键点：（理解传入的路径参数与最终生成的文件的关系）
gulp.dest(path)生成的文件路径是我们传入的path参数后面再加上gulp.src()中有通配符开始出现的那部分路径
也可以这样理解，是gulp.dest()传入的路径替换掉gulp.src()中的base路径，最终得到生成文件的路径
// 情况一、gulp.src没配置base参数
gulp.src(script/lib
.pipe(gulp.dest('build')) //生成的文件路径为 build/jquery.js
//情况二、gulp.src配置了base参数，改变base地址
gulp.src(script/lib
.pipe(gulp.dest('build')) //此时生成的文件路径为 build/lib/jquery.js
gulp.task
定义任务
gulp.task(name[, deps], fn) // name任务名 deps依赖其他任务的数组 fn任务函数
关键点：
1. 如果执行多个任务时，如何控制执行顺序
定义一个空的任务，将要执行的多个任务当作依赖
//只要执行default任务，就相当于把one,two,three这三个任务执行了
gulp.task('default',['one','two','three']);
注意：
若任务间无依赖，则会按照书写的顺序执行
若依赖的任务是异步操作，gulp并不会等待这个依赖的异步操作完成，而是会继续执行后续任务
2. 如果我们想要等依赖的异步操作完成后才继续执行，该如何做？（有3种方法）
i. 在异步操作完成后执行一个回调函数来通知gulp这个异步任务已经完成,这个回调函数就是任务函数的第一个参数
gulp.task('one',function(cb){ //cb为任务函数提供的回调，用来通知任务已经完成
//one是一个异步执行的任务
setTimeout(function(){
console.log('one is done');
cb(); //执行回调，表示这个异步任务已经完成
},5000);
});
//这时two任务会在one任务中的异步操作完成后再执行
gulp.task('two',['one'],function(){
console.log('two is done');
});
ii. 定义任务时返回一个流对象。适用于任务就是操作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');
});
iii. 返回一个promise对象
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
监视变化，我们可以在监视到变化后做一些操作
gulp.watch(glob[, opts], tasks) // glob监视的文件匹配模式 opts配置对象（一般不用） tasks文件变化后要执行的任务（数组）
gulp.watch(glob[, opts, fn]) // glob和opts同上 fn表示文件变化后要做的操作（函数 event对象 event.type变化的类型 event.path变化文件的路径 ）
gulp插件
自动加载
gulp-load-plugins
var gulp = require('gulp'); //加载gulp-load-plugins插件，并马上运行它
var plugins = require('gulp-load-plugins')(); // 这样如果需要使用gulp-rename插件，则plugins.rename
注意插件需在 package.json 中写好并安装好
重命名
gulp-rename
JS文件压缩
gulp-uglify
CSS文件压缩
gulp-minify-css
HTML文件压缩
gulp-minify-html
图片压缩
gulp-imagemin
JS代码检查
gulp-jshint
文件合并
gulp-concat
Less和Sass的编译
gulp-less / gulp-sass
自动刷新
gulp-livereload
