本人就职于一家互联网小公司，根据自己的项目纪录一下常用的gulp插件，项目不是很大！
文章目录
- 1. gulp-load-plugins
- 2. yargs
- 3. del
- 4. gulp-filter
- 5. gulp-header
- 6. run-sequence
- 7. gulp-uglify
- 8. gulp-minify-html
- 9. npm-check-updates
- 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('\n');
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会升级，项目依赖版本也会升级，用这个是个很不错的主意。