gulp项目案例——js、css压缩并添加MD5戳

使用gulp要结合当前的项目架构做一定的处理，以实现自己想要的效果。

项目目录大概：

webapp

　　lib

　　lar-ui

　　page

　　　　folder1

　　　　　　index.css

　　　　　　index.html

　　　　　　index.js

　　　　folder2

　　　　　　index.css

　　　　　　index.html

　　　　　　index.js

　　gulpfile.js

先罗列一下使用到的插件：

1.gulp-load-plugins （自动加载package.json中的插件）

2.gulp-clean （清除）

3.gulp-clean-css （压缩css）

4.gulp-uglify （压缩js）

5.gulp-rev （生成MD5戳）

6.gulp-rev-collector （将html文件中的js、css替换成带有MD5戳的文件）

7.run-sequence （进行排序）

8.through2 （根据需求自定义插件）

上代码：

//加载gulp模块
var gulp = require('gulp');
//自动加载插件,能自动加载package.json里的插件，省去繁琐的定义
var plugins = require('gulp-load-plugins')();
//加载run-sequence模块，按照顺序执行
var runSequence = require('run-sequence');
//加载through2模块
var through2 = require('through2');
//定义路径对象，方便调取

 var paths = {
　　webapp : './',
　　rev : './rev',
　　rev_js: './rev/js',
　　rev_css: './rev/css',
　　page: './page',
　　node_modules_js:'./node_modules_js/**/*.js',
　　node_modules_css:'./node_modules_css/**/*.css',
　　gulpfile_js:'./gulpfile.js',　　
　　src_js : './**/*.js',
　　src_css: './**/*.css',
　　src_html:'./page/**/*.html',
　　del_js: './**/*-*.js',
　　del_css:'./**/*-*.css',
　　rev_json:'./rev/**/*.json'
 }

/**
 * 自定义插件方法，修改rev.json文件内容
 */
function modify(modifier) {
    return through2.obj(function(file,encoding, done) {
        var content = modifier(String(file.contents));
        file.contents = new Buffer(content);
        this.push(file);
        done();
    });
}

/**
 * 删除字段
 * @param data json文件里的内容
 * @returns {XML|string}
 */
function replaceSuffix(data) {
    return data
        .replace(/page//gmi,"")

}
/**
 * 删除字段，让路径统一
 */
gulp.task("replaceSuffix",function (cb) {
    gulp.src([paths.rev_json])
        //删除多余的字段，统一路径
        .pipe(modify(replaceSuffix))
        .pipe(gulp.dest(paths.rev))
        .on('end', cb);
});

/**
 * 删除掉上一次构建时创建的资源
 */
gulp.task('clean',function () {
    return gulp.src([
        paths.rev_json,
        paths.del_js,
        paths.del_css
    ]).pipe(plugins.clean());
});

/**
 * 压缩js,生成时间戳
 */
gulp.task('uglifyJs',function(){
    return gulp.src([paths.src_js,'!'+paths.node_modules_js,'!'+paths.gulpfile_js],{read:true})
    //压缩js
        .pipe(plugins.uglify())
        //生成MD5
        .pipe(plugins.rev())
        //输出压缩生成时间戳后的js文件
        .pipe(gulp.dest(paths.webapp))
        //生成rev.json文件
        .pipe(plugins.rev.manifest({merge:true}))
        //输出json文件
        .pipe(gulp.dest(paths.rev_js));
});

/**
 * 压缩css，生成时间戳
 */
gulp.task('minifyCss',function(){
    return gulp.src([paths.src_css,'!'+paths.node_modules_css],{read:true})
    //压缩css
        .pipe(plugins.cleanCss())
        //生成MD5戳
        .pipe(plugins.rev())
        //输出压缩生成时间戳后的css文件
        .pipe(gulp.dest(paths.webapp))
        //生成rev.json文件
        .pipe(plugins.rev.manifest({merge:true}))
        //输出json文件
        .pipe(gulp.dest(paths.rev_css));

});

/**
 * 替换文件
 */
gulp.task('pagePath',function(){
    return gulp.src([paths.rev_json,paths.src_html])
        //将html文件中的js，css文件替换成压缩生成MD5戳的js、css文件
        .pipe(plugins.revCollector())
        //输出路径
        .pipe(gulp.dest(paths.page));
});


/**
 * 总入口
 */
gulp.task('default',function(){
    runSequence(
            'clean',
            ['uglifyJs','minifyCss'],
            'replaceSuffix',
            'pagePath'
        );
    
});

这个项目中遇到的问题在于全局压缩后带有MD5戳的js，css路径都带有上一级（即html中引入的是index.css，带有时间戳的路径是page/index-sdkfjdie102.css），导致替换文件时出错,解决办法就是这段代码：

/**
 * 自定义插件方法，修改rev.json文件内容
 */
function modify(modifier) {
    return through2.obj(function(file,encoding, done) {
        var content = modifier(String(file.contents));
        file.contents = new Buffer(content);
        this.push(file);
        done();
    });
}

这里用through2插件自定义另一个替换文件的插件，改变rev的json文件内容，使路径统一，最后使用run-sequence插件让期按指定的顺序执行。因为这个项目里html里的js，css文件都是同级目录应用，经过处理的json文件里会有同名不同戳的文件出现，导致后面的文件覆盖前面的文件

{
    "index": "index-c144065c18",
    "index": "index-a78095c25b"
}

如果项目中html中引入js、css方式是绝对路径，可以不作处理。如果跟我一样的话，解决方法看 gulp配合fs插件与path插件实现遍历目录得到子目录。