上一篇我们知道怎么去搭建一个简单的gulp自动化流程，这一章，我们将介绍在项目中常用的gulp插件。
这是我自己构建的工作中用到的前端自动化解决方案，项目地址：github.com/garsonguo/gulpbase，里面包含了开发时用的版本和发布时用的版本，对你有帮助的话，可以点watch关注下哦。
先看下我的自动化解决方案，目录如下：
首先，为了项目结构能够清晰，我们将各个任务放在了gulp/tasks/development目录中，因为
gulp需要从gukpfile.js启动，所以我们这里用到了第一个插件：
require-dir
用法如下：
varrequireDir=require('require-dir');
//引入tasks里面的所有的任务（包括子目录下的任务）
requireDir('./gulp/tasks',{recurse:true});
任务运行会默认去找default任务，所以这里我新建了一个default.js任务。
代码如下：
//默认任务
vargulp=require('gulp');
//开发版本
gulp.task('default',['webserver','less','js','images','watch']);
为了方便配置，我们这里新建了一个config.js的配置项。
部分代码如下，详细代码请看以上项目链接：
var src='./src';
var dest='./build';
module.exports= {
less:{
all:src+'/less/**/*.less',
src:src+'/less/*.less',
dest:dest+'/css',
rev:dest+'/rev/css',
settings:{//编译less过程需要的配置，可以为空
}}，}
在开发版本中，从default.js中，我们可以看到，我们用到了几个任务，webserver，less,js以及images,watch这几个任务，我们就从左到右的顺序来介绍这几个任务所用到的插件。
webserver主要用到了LiveReload，很多童鞋可能会不知道LiveReload是什么鬼，其实蛮简单的，他就是个页面自动刷新的插件，当你更改代码后，会自动去刷新浏览器，不用你再去手动刷新浏览器看效果了。要用自动刷新，我们需构建个本地的服务器，所以这里我们共用到了两个插件，
gulp-livereload、gulp-webserver
用以下命令安装：
npm install gulp-livereload gulp-webserver --save-dev
用法如下：
var gulp=require('gulp');
var livereload=require('gulp-livereload');
var webserver=require('gulp-webserver');
gulp.task('webserver',function() {
gulp.src('./')
.pipe(webserver({
livereload:true, //自动刷新浏览器
open:true //自动打开浏览器
}))
})
当我们编写js代码时，常常需要对其进行错误验证，当发生错误是，我们并不希望中断gulp，所以接下来两个插件将派上用场。
gulp-notify、gulp-plumber
用法如下：
var gulp=require('gulp');
var notify=require('gulp-notify');//捕获错误，返回错误信息
var plumber=require('gulp-plumber');//避免因错误而中断gulp
var handleErrors=require('../util/handleErrors');
var config=require('../config').js;
//开发版本
gulp.task('js',function() {
return gulp.src(config.src)
.pipe(plumber())
.on('error',handleErrors)
.pipe(gulp.dest(config.dest))
})
在进行CSS开发时，为了增加效率，减少代码量，我们往往会使用less/sass来进行相应的开发。那么我们就需要专门的插件（gulp-less、gulp-sass）来使其编译为CSS代码。有时候，为了兼容性，我们还需要在css代码上增加相应的前缀，我们可以用gulp-autoprefixer插件。
gulp-less、gulp-autoprefixer
代码如下：
var gulp=require('gulp');
var less=require('gulp-less');
var plumber=require('gulp-plumber');//避免因错误而中断gulp
var notify=require('gulp-notify');//捕获错误，返回错误信息
var autoprefixer= require('gulp-autoprefixer');
var handleErrors=require('../util/handleErrors');
var config=require('../config').less;
//开发版本
gulp.task('less',function() {
return gulp.src(config.src)
.pipe(plumber())
.pipe(less(config.settings))
.pipe(autoprefixer('last 2 version','safari 5','ie 8','ie 9','opera 12.1','ios 6','android 4'))
.on('error',handleErrors)
.pipe(gulp.dest(config.dest));
})
很多时候，UI给的图片很大，为了使其大小小一点，我们需要压缩，因此我们这里会用到（gulp-imagemin）来对图片进行压缩，压缩过的图片我们往往不需要再进行压缩了，所以我们可以用（gulp-cache）来进行缓存，对比图片是否有压缩过等。
gulp-imagemin、gulp-cache、imagemin-pngquant
用法如下：
var gulp=require('gulp');
var imagemin=require('gulp-imagemin');
var notify=require('gulp-notify');//捕获错误，返回错误信息
var plumber=require('gulp-plumber');//避免因错误而中断gulp
var cache=require('gulp-cache');
var pngquant= require('imagemin-pngquant');
var handleErrors=require('../util/handleErrors');
var config=require('../config').images;
gulp.task('images',function() {
return gulp.src(config.src)
.pipe(plumber())
.pipe(cache(imagemin({//只压缩修改的图片，没有修改的图片直接从缓存文件读取
progressive:true,//无损压缩
use:[pngquant()]//使用 pngquant 深度压缩 png 图片
})))
.on('error',handleErrors)
.pipe(gulp.dest(config.dest));
})
当启动gulp时，我们往往需要对任务的文件夹进行监督，看哪些文件有变动，从而及时的将改变更新到目标文件中，这里我们就用到了（gulp-watch）。
gulp-watch
用法如下：
var gulp=require('gulp');
var watch=require('gulp-watch');
var config=require('../config');
gulp.task('watch',function() {
//监听less文件源，有改变，运行less
watch(config.less.all,function() {
gulp.start('less')
});
watch(config.js.src,function() {
gulp.start('js')
})
watch(config.images.src,function() {
gulp.start('images')
})
})
开发的解决方案所用到的插件就介绍到这里，有什么不正确或者错误的地方，望网友可以指正。