用Gulp搭建前端自动化解决方案（三）

上篇主要介绍了开发版本的插件运用，这篇我讲介绍发布版本中用到的插件。

这是我自己构建的工作中用到的前端自动化解决方案，项目地址：github.com/garsonguo/gulpbase，里面包含了开发时用的版本和发布时用的版本，对你有帮助的话，可以点watch关注下哦。

---

当版本发布时，我们需要对前端进行相应的优化。例如：js压缩，css压缩，js/css重命名，图片雪碧图，缓存方案解决等。

---

发布版本的defalut.js，任务代码如下：

//发布版本

 gulp.task('default',['less','js','images','rev']);

js压缩我们会用到（gulp-uglify）和重命名插件（gulp-rename）。

gulp-uglify、gulp-rename

用法如下：

//发布版本

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;

var rev=require('gulp-rev');

va ruglify=require('gulp-uglify');

var rename= require('gulp-rename');

gulp.task('js',function() {

return gulp.src(config.src)

.pipe(plumber())

.pipe(rev())//设置hash key

.pipe(gulp.dest(config.dest))

.pipe(rename({suffix:'.min'}))//重命名  增加min

.pipe(uglify())//压缩js

.pipe(gulp.dest(config.dest))

.pipe(rev.manifest())//设置hash key json

.pipe(gulp.dest(config.rev))

})

相对于js，less这边将多一个css压缩插件（gulp-minify-css）

gulp-minify-css

用法如下：

//发布版本

var rev=require('gulp-rev');

var minifycss= require('gulp-minify-css');

var rename= require('gulp-rename');

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'))

.pipe(rev())//设置hash key

.pipe(gulp.dest(config.dest))

.pipe(rename({suffix:'.min'}))//重命名 增加min

.pipe(minifycss())//压缩css

.pipe(gulp.dest(config.dest))

.pipe(rev.manifest())//设置hash key json

.pipe(gulp.dest(config.rev))

})

很多时候，我们在HTML引用中，有新的版本我们需要去手动替换相应的js、css,为了让其自动替换对应的版本，我们需要插件（gulp-rev）和（gulp-rev-collector）

gulp-rev、gulp-rev-collector

代码如下：

var gulp= require('gulp');

var config= require('../config').rev;

var rev= require('gulp-rev');

var revCollector= require("gulp-rev-collector");

gulp.task('rev',function() {

return gulp.src([config.revJson,config.src])

.pipe(revCollector({

replaceReved:true,

}) )

.pipe(gulp.dest(config.dest) );

});

很多时候，我们需要清理目标文件夹，这是我们要用到插件（gulp-clean）

gulp-clean

用法如下：

var gulp=require('gulp');

var clean=require('gulp-clean');

var config=require('../config').clean;

gulp.task('clean',function() {

return gulp.src(config.dest)

.pipe(clean())

})

关于发布版本所用到的插件就介绍到这里，有错误或者用法不当的地方，望网友纠正！