最近在折腾gulp这方面的东西,其中发现了很多非常好用的插件,现在给大家安利一下:
P.S. : 如果您需要查看这些插件的具体用法,我建议您进入到 www.npmjs.com 中,查找该插件并学习使用。
或者你也可以联系我,我会尽我所能帮你解答哦~
1、gulp-compass。
这个插件可以帮助我们使用compass对sass文件进行编译,当然前提是你有安装ruby并搭建好sass和compass的环境。
2、gulp-autoprefixer。
这个插件可以帮助我们对某些CSS属性进行前缀的插入,非常好用。但大家要注意browsers这一项,里面应该配置你当前所需要兼容的浏览器环境。
推荐的browser属性安排为:
browsers: [
'last 2 versions',
'safari 5',
'ie 8',
'ie 9',
'opera 12.1',
'ios 6',
'android 4'
]
以上会将比较主流的浏览器都兼容了。
3、gulp-data。
这一个插件是我在使用ejs模板的时候偶然发现的。当时我正苦恼于如何将数据打入到ejs中,以便我通过gulp创造出属于我的html。它绝对是一个利器。
只是大家需要安排好文件的路径,这样gulp-data就会按照每一个文件名来将制定的数据文件打入进去了。
以下是我关于ejs的gulp配置,其中还利用了gulp-cached。
var gulp = require('gulp');
var config = require('../config.js');
var cache = require('gulp-cached');
var path = require('path');
var data = require('gulp-data');
var ejs = require('gulp-ejs');
gulp.task('ejs', function () {
return gulp.src( config.ejs.src )
.pipe( cache( 'ejs' ) )
.pipe(data(function(file) {
return require(path.join(path.dirname(file.path), 'ejs-data/', path.basename(file.path, '.ejs') + '.json'));
}))
.pipe( ejs() )
.pipe( gulp.dest(config.ejs.dest) );
})
4、gulp-cached。
这个插件主要是通过缓存的形式,将未修改的文件不放到管道中。因为文件不在管道中,所以不会被进行gulp的下一步处理。通过它,我们可以节省很多的浪费资源,真正的做到只对需要的文件进行处理。
用法非常简单,建议大家去npnjs.com中查找这个插件并寻找相应的用法。
5、gulp-changed。
这个插件主要是不让未经修改的文件进入管道数据流中。
它可以用在哪里呢?最常用的地方就是——图片,例如png,jpg等压缩。当我们的工作目录中存在大量的需要压缩的图片,但是他们是已经被压缩了的,这个时候我们就可以通过使用它来达到极大的资源节省。
好比我的一个项目中,每压缩一次png图片,都要跑10s。现在用了gulp-changed,我只要33ms就能跑完了。提升空间极度惊人。
注意:这个插件,以我的观察,应该是通过比较文件名而进行下一步处理的。形如png等文件,因为输入输出两个过程都不会影响文件名,所以可以用这个插件。但形如sass等会将文件名或者后缀名改掉的文件,则无法使用该插件。
6、gulp-remember。
这个插件与gulp-cached配合使用。加入你在一个工作流之中,需要对每一个文件进行一点处理,例如为每一个js文件添加一些注释信息等,newer就可以让这个js文件在进行完处理之后再重新放入到cached中,而不进入下一步的管道。
7、gulp-newer。
这个插件只会将当前目录下面的新文件放入到工作流中,如果文件已经在输出目录中存在,则不会进入到管道中。
注意:这个插件,以我的观察,应该是通过比较文件名而进行下一步处理的。形如png等文件,因为输入输出两个过程都不会影响文件名,所以可以用这个插件。但形如sass等会将文件名或者后缀名改掉的文件,则无法使用该插件。
8、gulp-sequence。
有时候我们会遇到这样的情况:当我使用gulp.run()运行一串任务的时候,因为gulp的任务是并发执行的,很多时候其他的任务都没有完成,然后这个已经完成了。就好比我需要使用compass将sass文件编译出来,同时他们会生成雪碧图,而后我才跑png压缩的任务。这个时候,我们就要用到gulp-sequence了。
gulp-sequence与gulp-run-sequence的用法大同小异,其实也跟gulp.run()基本一致,只不过在括号中,一个参数代表一组任务,这一组任务执行完了,才会执行下一组任务。同一组任务中,可以允许并发执行。
形如以下的代码:
sequence('sass', ['png', 'ejs'])
也就是:我先执行“sass'任务,然后再同时并发执行'png'和'ejs'。
————————————————————————————————————————————————
gulp中好的插件非常的多,我还会陆续补充哦!
有什么好的推荐或者建议,也请与我联系,或者在下方留言。