gulp 常见插件及作用
gulp-minify-css //css压缩
gulp-jshint //js 检查
gulp-uglify //js压缩
gulp-rename //重命名
gulp-concat //合并文件
gulp-clean //清空文件夹
gulp-notify //消息提示
gulp-sourcemaps //生成maps文件
gulp-changed //检测文件修改
gulp-imagemin //图片压缩
gulp-autoprefixer //浏览器前缀
gulp-livereload //用于自动刷新浏览器，反映出源码的最新变化
gulp模块的方法
gulp模块的 src方法，用于产生数据流。它的参数表示所要处理的文件，这些指定的文件会转换成数据流。参数的写法一般有以下几种形式。
- js/app.js：指定确切的文件名。
- js/*.js：某个目录所有后缀名为js的文件。
- js/**/*.js：某个目录及其所有子目录中的所有后缀名为js的文件。
- !js/app.js：除了js/app.js以外的所有文件。
dest方法将管道的输出写入文件，同时将这些输出继续输出，所以可以依次调用多次dest方法，将输出写入多个目录。如果有目录不存在，将会被新建。
gulp.src('./client/templates/*.jade') .pipe(jade()) .pipe(gulp.dest('./build/templates')) .pipe(minify()) .pipe(gulp.dest('./build/minified_templates')); task方法用于定义具体的任务。它的第一个参数是任务名，第二个参数是任务函数。下面是一个非常简单的任务函数。 gulp.task('greet', function () { console.log('Hello world!'); }); task方法还可以指定按顺序运行的一组任务。
task方法的回调函数，还可以接受一个函数作为参数，这对执行异步任务非常有用。
// 执行shell命令var exec = require('child_process').exec; gulp.task('jekyll', function(cb) { // build Jekyll exec('jekyll build', function(err) { if (err) return cb(err); // return error cb(); // finished task }); }); 如果一个任务的名字为default，就表明它是“默认任务”，在命令行直接输入gulp命令，就会运行该任务。 gulp.task('default', function () { // Your default task }); watch方法用于指定需要监视的文件。一旦这些文件发生变动，就运行指定任务。 gulp.task('watch', function () { gulp.watch('templates/*.tmpl.html', ['build']); }); gulp-load-plugins 模块 一般情况下，gulpfile.js中的模块需要一个个加载。
var gulp = require('gulp'), jshint = require('gulp-jshint'), uglify = require('gulp-uglify'), concat = require('gulp-concat'); gulp.task('js', function () { return gulp.src('js/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')) .pipe(uglify()) .pipe(concat('app.js')) .pipe(gulp.dest('build')); }); 上面代码中，除了gulp模块以外，还加载另外三个模块。
这种一一加载的写法，比较麻烦。使用gulp-load-plugins模块，可以加载package.json文件中所有的gulp模块。上面的代码用gulp-load-plugins模块改写，就是下面这样。
var gulp = require('gulp'), gulpLoadPlugins = require('gulp-load-plugins'), plugins = gulpLoadPlugins(); gulp.task('js', function () { return gulp.src('js/*.js') .pipe(plugins.jshint()) .pipe(plugins.jshint.reporter('default')) .pipe(plugins.uglify()) .pipe(plugins.concat('app.js')) .pipe(gulp.dest('build')); }); gulp-livereload模块 gulp-livereload模块用于自动刷新浏览器，反映出源码的最新变化。它除了模块以外，还需要在浏览器中安装插件，用来配合源码变化。
var gulp = require('gulp'), less = require('gulp-less'), livereload = require('gulp-livereload'), watch = require('gulp-watch'); gulp.task('less', function() { gulp.src('less/*.less') .pipe(watch()) .pipe(less()) .pipe(gulp.dest('css')) .pipe(livereload()); });