前端构建工具gulp使用教程（二）、常用gulp插件以及gulp使用完整实例

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。