gulp為css,js添加版本號

由於cdn緩存，更改樣式后會有一段時間不生效，解決方法就是給css,js加上版本號效果如下：

1.安裝gulp插件

npm install --save-dev gulp-rev (version:9.0.0)
npm install --save-dev gulp-rev-collector (version:1.3.1)
npm install --save-dev run-sequence (version:2.2.1)

2.修改gulpfile.js文件

//引入gulp和gulp插件
var gulp = require('gulp'),
    runSequence = require('run-sequence'),
    rev = require('gulp-rev'),
    revCollector = require('gulp-rev-collector');
    ...

//此處省略sass等配置
...


//定義css、js源文件路徑
var cssSrc = 'dist/**/*.css', //dist下css所有文件
    jsSrc = 'dist/**/*.js' ; //dist下所有js文件

//CSS生成文件hash編碼並生成 rev-manifest.json文件名對照映射
gulp.task('revCss',function(){
    return gulp.src(cssSrc)
           .pipe(rev())
           .pipe(rev.manifest())
           .pipe(gulp.dest('dist/rev/css'));
})

//JS生成文件hash編碼並生成rev-manifest.json文件名對照映射
gulp.task('revJs',function(){
    return gulp.src(jsSrc)
           .pipe(rev())
           .pipe(rev.manifest)
           .pipe(gulp.dest('dist/rev/js'));
})

//Html替換css、js版本
gulp.task('revHtml',function(){
    return gulp.src(['dist/rev/**/*.json','dist/*.html'])
           .pipe(revCollector())
           .pipe(gulp.dest('dist'));
})

//開發構建
gulp.task('dev',function(done){
    condition = false;
    runSequence(
        ['revCss'],
        ['revJs'],
        ['revHtml'],
        done);
})
gulp.task('default',['sass','html','images','watch','scripts','dev']);

3.修改node_module里相關配置文件

（1）更改gulp-rev文件（node_modules--->gulp-rev--->index.js）

將 manifest[originalFile] = revisionedFile;
改為 manifest[originalFile] =  originalFile + '?v=' + file.revHash;

（2）更改gulp-rev-collector(node_modules--->gulp-rev-collector--->index.js)

將 var cleanReplacement = path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' );

改為 var cleanReplacement =  path.basename(json[key]).split('?')[0];

（3）更改rev-path文件（node_module--->gulp-rev--->node_module--->rev-path--->index.js）

將 return modifyFilename(pth, (filename, ext) => `${filename}-${hash}${ext}`);
改為 return modifyFilename(pth, (filename, ext) => `${filename}${ext}`);

（4）更改gulp-rev-collector(node_modules--->gulp-rev-collector--->index.js)

    將  regexp: new RegExp( prefixDelim + pattern, 'g' ),
    改為 regexp: new RegExp( prefixDelim + pattern+'(\\?v=\\w{10})?', 'g' ),

然后在項目目錄下執行gulp 即可自動為css,js文件生成版本號