gulp常用插件

本人就职于一家互联网小公司，根据自己的项目纪录一下常用的gulp插件，项目不是很大！

文章目录

1. 1. gulp-load-plugins
2. 2. yargs
3. 3. del
4. 4. gulp-filter
5. 5. gulp-header
6. 6. run-sequence
7. 7. gulp-uglify
8. 8. gulp-minify-html
9. 9. npm-check-updates
10. 10. 待完善……

gulp-load-plugins

此插件的功能主要搭配 package.json 文件中声明的依赖使用。 自动加载package.json 中声明的gulp-或gulp.开头的插件

不必这样：

1 2 3 4

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

只需这样：

1 2 3 4 5 6 7 8 9

var gulp = require('gulp'), $ = require('gulp-load-plugins')(); gulp.task('js', function () { return gulp.src('js/*.js') .pipe($.jshint()) .pipe($.uglify()) .pipe($.concat('main.js')) .pipe(gulp.dest('build')); });

yargs

Node中处理命令行参数，把参数序列化成 json 对象

del

自行看文档，不解释

gulp-filter

筛选匹配到的文件，类似于中间件，自行看文档

gulp-header

这个非常有用，可以在文件中添加头部注释，包含任意想要的信息，通常就是文本更新时间、作者、描述、版本号、license等，比如：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

function getHeader () { var template = ['/**', ' * time: <%= time%>', ' * site: <%= site%>', ' * contact: <%= blog%>', ' */', '' ].join(' '); return $.header(template, { time: new Date(), site: 'http://www.yeezan.com/', blog: 'http://donglegend.com/' }); }   gulp.task("uglify", function() { gulp.src(["./js/build/*.js"]) .pipe($.uglify({ compress: { drop_console: true, unused: true } })) .pipe(getHeader()) .pipe(gulp.dest("./js/build/min/")); });

run-sequence

同步按顺序执行gulp的task任务，亲测，类似的插件都是坑，不好用(可能我是用方式不对。。。),望观看官网api http://www.gulpjs.com.cn/docs/api/
解决同步执行方法，用Makefile文件，执行命令
demo:

1 2 3 4

build: gulp clean gulp browserify gulp uglify

gulp-uglify

gulp-minify-html

不解释

npm-check-updates

这款插件棒棒哒，主要用来更新package.json的依赖，时间长了，node会升级，项目依赖版本也会升级，用这个是个很不错的主意。

待完善……