gulpfile笔记
gulp的使用流程：
首先通过gulp.src()方法获取到我们想要处理的文件流，然后把文件流通过pipe方法导入到gulp的插件中，最后把经过插件处理后的流再通过pipe方法导入到gulp.dest()中
1、gulp.task(name[,desp], fn);
name: 执行的任务名
desp: 任务执行需要依赖的任务
PS：如果依赖的任务是异步操作的话，那么就不会等待依赖的任务执行完再去执行该任务，但是如果想要让异步的任务执行完再去执行该任务的话，可以通过以下三种方法：
（1）通过一个毁掉函数，将回调函数放在异步执行操作里面，来通知gulp这个异步操作已经完成，这个回调函数就是任务函数的第一个参数
gulp.task('one',function(callback){
//one是一个异步执行的任务
setTimeout(function(){
console.log('one is done');
callback(); //执行回调，表示这个异步任务已经完成
},5000);
});
//这时two任务会在one任务中的异步操作完成后再执行
gulp.task('two',['one'],function(){
console.log('two is done');
});
gulp.task("default", ["two"], function() {
console.log("default is runing");
});
（2）定义任务时返回一个流对象。适用于任务就是操作gulp.src获取到的流的情况
gulp.task('one',function(cb){
var stream = gulp.src('client/**/*.js')
.pipe(dosomething()) //dosomething()中有某些异步操作
.pipe(gulp.dest('build'));
return stream;
});
（3）返回一个promise对象
//一个著名的异步处理的库 https://github.com/kriskowal/q var Q = require('q'); gulp.task('one',function(cb){ var deferred = Q.defer(); // 做一些异步操作 setTimeout(function() { deferred.resolve(); }, 5000); return deferred.promise; });
2、gulp.dest(path)
path: 文件的写入位置，需要注意的是：只能用来指定要生成的文件目录，不能指定生成的文件名，生成的文件名是有导入到它的文件流决定的，如果想要改变文件名的话，使用gulp-rename
3、gulp.src(globs)
globs: 文件匹配模式，用来匹配文件路径（包括文件名），当有多种匹配时可以使用数组，但是使用数组的时候，如果要用排除模式（!单个匹配模式）的话，不能将要排除的放在数组的第一个。。。
【 * 匹配文件路径中的0个或多个字符，但不会匹配路径分隔符，除非路径分隔符出现在末尾 ** 匹配路径中的0个或多个目录及其子目录,需要单独出现，即它左右不能有其他东西了。如果出现在末尾，也能匹配文件。 ? 匹配文件路径中的一个字符(不会匹配路径分隔符) [...] 匹配方括号中出现的字符中的任意一个，当方括号中第一个字符为^或!时，则表示不匹配方括号中出现的其他字符中的任意一个，类似js正则表达式中的用法 !(pattern|pattern|pattern) 匹配任何与括号中给定的任一模式都不匹配的 ?(pattern|pattern|pattern) 匹配括号中给定的任一模式0次或1次，类似于js正则中的(pattern|pattern|pattern)? +(pattern|pattern|pattern) 匹配括号中给定的任一模式至少1次，类似于js正则中的(pattern|pattern|pattern)+ *(pattern|pattern|pattern) 匹配括号中给定的任一模式0次或多次，类似于js正则中的(pattern|pattern|pattern)* @(pattern|pattern|pattern) 匹配括号中给定的任一模式1次，类似于js正则中的(pattern|pattern|pattern) 】
4、gulp.watch(glob, tasks)
glob: 监视的文件匹配模式
tasks: 文件变化后要执行的任务，为一个数组
5、重命名
比如：
rename = require('gulp-rename'),
pipe(rename('jquery.min.js')) //会将jquery.js重命名为jquery.min.js
6、js文件压缩
比如：
uglify = require("gulp-uglify");
.pipe(uglify()) //使用uglify进行压缩,更多配置请参考：
7、css文件压缩
比如：
minifyCss = require("gulp-minify-css");
.pipe(minifyCss()) //压缩
8、html文件压缩
比如：
minifyHtml = require("gulp-minify-html");
.pipe(minifyHtml()) //压缩
9、图片压缩
比如：
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant'); //png图片压缩插件
.pipe(imagemin({
progressive: true,
use: [pngquant()] //使用pngquant来压缩png图片
}))
10、文件合并
比如：
concat = require("gulp-concat");
.pipe(concat('all.js')) // 合并匹配到的js文件并命名为 "all.js"
11、less和sass的编译
（1）sass
sass = require("gulp-sass");
.pipe(sass())
（2）less
less = require("gulp-less");
.pipe(less())
12、js代码检查
比如：
jshint = require("gulp-jshint");
.pipe(jshint())
.pipe(jshint.reporter('default'))
// npm install --save-dev jshint-stylish
.pipe(jshint.reporter('jshint-stylish'))
14、自动刷新
比如：
browserSync = require("browser-sync").create(),
reload = browserSync.reload; // 自动刷新
gulp.task("browser-sync", function() {
browserSync.init(resource.html, {
server: {
baseDir: ["."], //or [,,,,,],
index: "build/index.html"
}
});
});
15、加载插件+重命名
var plugins = require("gulp-load-plugins")({
rename: {
"gulp-make-css-url-version": "cssver",
"gulp-content-includer": "includer",
"gulp-html-extend": "htmlextend",
"gulp-minify-css": "minicss",
"gulp-rev-append": "revap"
}
});
15、notify：消息提示
.pipe(plugins.notify({ message: 'Styles task complete' }));
16、rename：重命名
.pipe(plugins.rename({suffix: '.min'}))
17、changed: 编译或打包改变过的文件
.pipe(plugins.changed(dist, {extension: ".js"}))
