我们开发中可能经常遇到这种问题，bug已经修改，但是由于用户端有缓存，导致bug依然存在，我们需要通过更改文件的版本号，来去除缓存的影响。

我们希望的版本号形式一般是这样的，文件名称＋“?v=”+版本号

<link rel="stylesheet" href="../css/style.css?v=0d83247610">
<script src="../js/index.js?v=61c1ef9f34"></script></br>

安装gulp和相关插件

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

编写gulpfile.js

核心代码如下，其中文件目录根据自己的进行更改

• 引用插件

var gulp=require('gulp'),
    rev = require('gulp-rev'),
    revCollector = require('gulp-rev-collector'),
    runSequence = require('run-sequence');

• CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射

gulp.task('revCss', function(){
    return gulp.src('src/less/**/*.less')
        .pipe(less())
        .pipe(minifycss())
        .pipe(gulp.dest('dist/css'))
        .pipe(rev())
        .pipe(rev.manifest())
        .pipe(gulp.dest('dist/css'));
});

• js生成文件hash编码并生成 rev-manifest.json文件名对照映射

gulp.task('revJs', function(){
    return gulp.src('src/js/**/*.js')
        .pipe(rev())
        .pipe(gulp.dest('dist/js'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('dist/js'));
});

• html更换css、js文件版本

gulp.task('revHtml', function () {
    return gulp.src(['dist/**/*.json', 'src/pages/*.html']) 
        .pipe(revCollector())
        .pipe(gulp.dest('dist/pages'));  
});

• 创建任务依次执行这3个任务

gulp.task('rev', function(){
    return runSequence(['revCss'],['revJs'],['revHtml'])
});

这样生成的版本号并不是我们期望的，还需要对gulp插件进行更改

更改插件源码

• 更改gulp-rev

打开node_modules\gulp-rev\index.js

//更改前，135行
manifest[originalFile] = revisionedFile;

//更改后
manifest[originalFile] = originalFile + '?v=' + file.revHash;

• 更改rev-path

打开node_modules\rev-path\index.js

//更改前，第9行
return modifyFilename(pth, (filename, ext) => `${filename}-${hash}${ext}`);

//更改后
return modifyFilename(pth, (filename, ext) => `${filename}${ext}`);

• gulp-rev-collector

打开node_modules\gulp-rev-collector\index.js

//更改前，第40行
var cleanReplacement =  path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' );
//更改后
var cleanReplacement =  path.basename(json[key]).split('?')[0];