gulp批量为css,js添加版本号解决缓存问题

1、安装gulp和gulp插件

    npm init

    npm install --save-dev gulp //version 3.9.1

    npm install  --save-dev gulp-rev //version 8.1.1

    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');
 
//定义css、js源文件路径
var cssSrc = 'src/**/*.css',  //src下的所有css文件
    jsSrc = 'src/**/*.js';  //src下的所有js文件
 
 
//CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revCss', function(){
    return gulp.src(cssSrc)
        .pipe(rev())
        .pipe(rev.manifest())
        .pipe(gulp.dest('rev/css'));
});
 
 
//js生成文件hash编码并生成 rev-manifest.json文件名对照映射
gulp.task('revJs', function(){
    return gulp.src(jsSrc)
        .pipe(rev())
        .pipe(rev.manifest())
        .pipe(gulp.dest('rev/js'));
});
 
 
//Html替换css、js文件版本
gulp.task('revHtml', function () {
    return gulp.src(['rev/**/*.json', 'src/*.html'])
        .pipe(revCollector())
        .pipe(gulp.dest('src'));
});
 
 
//开发构建
gulp.task('dev', function (done) {
    condition = false;
    runSequence(
        ['revCss'],
        ['revJs'],
        ['revHtml'],
        done);
});
 
 
gulp.task('default', ['dev']);

3、更改node_modules-->gulp-rev-->index.js

  将    manifest[originalFile] = revisionedFile;
  改为  manifest[originalFile]=originalFile+'?v='+file.revHash;

4、更改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];

5、继续改node_modules-->gulp-rev-collector-->index.js

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

6、更改node_modules-->rev-path-->index.js

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

7、end

打开终端，切换至根目录运行：gulp  生成文件rev

<link rel="stylesheet" type="text/css" media="screen" href="./css/basic.css?v=d41d8cd98f" />
<script src="./js/index.js?v=d41d8cd98f"></script>