解决项目前端静态资源版本更新与缓存--gulp-rev

第一步，cd 项目根目录，安装所需的包，用npm安装：

npm install gulp del gulp-rev run-sequence gulp-rev-collector --save-dev

第二步，在gulpfile.js文件中写上配置：

var gulp = require('gulp'),
    runSequence = require('run-sequence'), //同步执行任务
    rev = require('gulp-rev'),
    revCollector = require('gulp-rev-collector'), //版本数据
    del = require('del');//删除


//定义css、js源文件路径
var cssSrc = './css/*.css',
    jsSrc = './js/v2/*.js';

// 删除导出数据
gulp.task('clean', function (cb) {
    return del([
        // 我们不希望删掉这个文件，所以我们取反这个匹配模式
        'build/js/',
        'build/*.css',
        '!build/font'

    ], cb);
});

//CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revCss', function(){
    return gulp.src(cssSrc)
        .pipe(rev())
        .pipe(gulp.dest('./build'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('./build'));
});

//JS生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revJs', function(){
    return gulp.src(jsSrc)
        .pipe(rev())                                //给文件添加hash编码
        .pipe(gulp.dest('./build/js/v2'))
        .pipe(rev.manifest())                       //生成rev-mainfest.json文件作为记录
        .pipe(gulp.dest('./build/js/v2'));
});

//生产环境Jsp模板css js文件替换
gulp.task('revJsp', function () {
    return gulp.src(['build/**/*.json','jsp/include/common_3.jsp'])
        .pipe(revCollector(
            {
                replaceReved: true,
                dirReplacements: { //路径替换
                    '${ctx}/css/': '${ctx}/build/',
                    '${ctx}/js/v2' : '${ctx}/build/js/v2'
                }
            }
        ))                         //替换html中对应的记录
        .pipe(gulp.dest('./jsp/include'));                     //输出到该文件夹中
});


//开发环境Jsp模板css js文件替换
gulp.task('dRevJsp', function () {
    return gulp.src(['css/*.json','js/v2/*.json','jsp/include/common_3.jsp'])
        .pipe(revCollector(
            {
                replaceReved: true,
                dirReplacements: {
                    '${ctx}/build/': '${ctx}/css/',
                    '${ctx}/build/js/v2' : '${ctx}/js/v2'

                }
            }
        ))                         //替换html中对应的记录
        .pipe(gulp.dest('./jsp/include'));                     //输出到该文件夹中
});

//开发环境构建
gulp.task('dev-d', function (done) {
    condition = false;
    //依次顺序执行
    return runSequence(
        'dRevJsp', //替换JSP模板
        done
    );
});

//生产环境构建
gulp.task('dev-p', function (done) {
    condition = false;
    //依次顺序执行
    return runSequence(
        'clean',
        ['revCss','revJs'],  //第二步替换静态资源
        ['revJsp'], //第三步替换JSP模板
        done
    );
});

第三步，打开cmd，切换到项目所在的目录，运行

gulp dev-p

备注：1、第三步也可以用 webstorm 直接在  dev 的命令行 右键==》Run ‘dev’

2、默认的，task 将以最大的并发数执行，也就是说，gulp 会一次性运行所有的 task 并且不做任何等待。如果你想要创建一个序列化的 task 队列，并以特定的顺序执行，这里用的是run-sequence 插件

3、虽然是顺序执行，测试如果如果del  clean命令模块 前面不加return，clean 后面的却不执行。

4、加上return  可以执行，不加return的话，task和里面的gulp流是异步执行的，就会出现先finished再编译的情况。