gulp的插件数量虽然没有grunt那么多,但也可以说是应有尽有了,下面列举一些常用的插件。
一、常用插件使用说明
1、自动加载插件
使用gulp-load-plugins。详细教程请参考https://github.com/jackfranklin/gulp-load-plugins
安装:npm install --save-dev gulp-load-plugins
要使用gulp的插件,首先得用require来把插件加载进来,如果我们要使用的插件非常多,那我们的gulpfile.js文件开头可能就会是这个样子的:
var gulp = require('gulp'),
//一些gulp插件,abcd这些命名只是用来举个例子
a = require('gulp-a'),
b = require('gulp-b'),
c = require('gulp-c'),
d = require('gulp-d'),
e = require('gulp-e'),
f = require('gulp-f'),
g = require('gulp-g'),
//更多的插件...
z = require('gulp-z');
虽然这没什么问题,但会使我们的gulpfile.js文件变得很冗长,看上去不那么舒服。gulp-load-plugins插件正是用来解决这个问题。
gulp-load-plugins这个插件能自动帮你加载package.json文件里的gulp插件。例如假设你的package.json文件里的依赖是这样的:
{
"devDependencies": {
"gulp": "~3.6.0",
"gulp-rename": "~1.2.0",
"gulp-ruby-sass": "~0.4.3",
"gulp-load-plugins": "~0.5.1"
}
}
然后我们可以在gulpfile.js中使用gulp-load-plugins来帮我们加载插件:
var gulp = require('gulp');
//加载gulp-load-plugins插件,并马上运行它
var plugins = require('gulp-load-plugins')();
然后我们要使用gulp-rename和gulp-ruby-sass这两个插件的时候,就可以使用plugins.rename和plugins.rubySass来代替了,也就是原始插件名去掉gulp-前缀,之后再转换为驼峰命名。
实质上gulp-load-plugins是为我们做了如下的转换
plugins.rename = require('gulp-rename');
plugins.rubySass = require('gulp-ruby-sass');
gulp-load-plugins并不会一开始就加载所有package.json里的gulp插件,而是在我们需要用到某个插件的时候,才去加载那个插件。
最后要提醒的一点是,因为gulp-load-plugins是通过你的package.json文件来加载插件的,所以必须要保证你需要自动加载的插件已经写入到了package.json文件里,并且这些插件都是已经安装好了的。
2、重命名
使用gulp-rename。详细教程请参考https://www.npmjs.com/package/gulp-rename。
安装:npm install --save-dev gulp-rename
用来重命名文件流中的文件。用gulp.dest()方法写入文件时,文件名使用的是文件流中的文件名,如果要想改变文件名,那可以在之前用gulp-rename插件来改变文件流中的文件名。
var gulp = require('gulp'),
rename = require('gulp-rename'),
uglify = require("gulp-uglify");
gulp.task('rename', function () {
gulp.src('js/jquery.js')
.pipe(uglify()) //压缩
.pipe(rename('jquery.min.js')) //会将jquery.js重命名为jquery.min.js
.pipe(gulp.dest('js'));
});
3、js文件压缩
使用gulp-uglify。用来压缩js文件,使用的是uglify引擎。详细教程请参考:https://github.com/terinjokes/gulp-uglify
安装:npm install --save-dev gulp-uglify
var gulp = require('gulp'),
uglify = require("gulp-uglify");
gulp.task('minify-js', function () {
gulp.src(['static/**/*.js', '!**/.min.js'], {allowEmpty: true}) // 要压缩的js文件
.pipe(uglify()) //使用uglify进行压缩,更多配置请参考:
.pipe(gulp.dest('static')); //压缩后的路径
});
4、css文件压缩
使用gulp-clean-css来压缩js文件。详细教程请参考https://github.com/scniro/gulp-clean-css。不要用gulp-minify-css,这个插件官方已经不推荐使用。
安装:npm install --save-dev gulp-clean-css
var gulp = require('gulp'),
cleanCss = require("gulp-clean-css");
gulp.task('minify-css', function () {
gulp.src(['static/**/*.css', '!static/**/*.min.css'], {allowEmpty: true}) // 要压缩的css文件
.pipe(cleanCss()) //压缩css
.pipe(gulp.dest('static'));
});
用上面这段代码压缩,会发现CSS中图片相对路径会被更改。比如压缩前:background('../../../image/bg.jpg'),压缩后却变成background(../image/bg.jpg)。
这个的处理方案是调用cleanCss()时将rebase参数设置为false。
gulp.task('mini