前言

我们有的项目每次发布后，会有缓存问题，那么我们常用的方式是在js,css文件后面加个版本号，基于有的项目不同，偶尔改一下几个文件。你手动添加也可以，但是多页面的话，那就比较麻烦，所以我们需要自动化实现添加版本号。因为有的项目只需要在原来的HTML文件上进行js ,css版本的替换，不需要生成新的目录文件，也不要压缩，只需添加版本号。所以最后选择了gulp来给静态资源添加版本号。 

<link rel="stylesheet" href="css/style.css">
<script src="js/jquery.min.js"></script>

想要的代码： 

<link rel="stylesheet" href="css/style.css?v=abe72b7358">
<script src="js/jquery.min.js?v=fbd2be1cfe"></script>
下面我就在这里简单记录一下实现的步骤  

一、安装gulp和gulp自动化添加版本的相关插件 

npm install gulp --save-dev
npm install gulp-rev --save-dev                //更改版本号  
npm install gulp-rev-collector --save-dev   //替换html中的引用路径  
npm install run-sequence --save-dev        //同步执行任务
 具体的安装这里就省下了。

二、编写gulpfile.js文件 

var gulp = require('gulp'),
    runSequence = require('run-sequence'),
    rev = require('gulp-rev'),
    revCollector = require('gulp-rev-collector');
//定义css、js源文件路径
var cssSrc = 'src/css/*.css',
    jsSrc = 'src/js/*.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']);
 三、运行task

运行，得到如下的效果， 

   //rev目录下生成了rev-manifest.json对应文件
   {
      "jquery.min.js": "jquery-fbd2be1cfe.min.js"
   }
src目录下的html代码也变了 
<script src="js/jquery-fbd2be1cfe.min.js"></script>
 这显然不是自己想要的。网上搜索一番，按方法修改，还是不能实现自己想要的效果，因为当时是老版本，解决方法按当时的版本写的，不过总算找到方法了。最后发现只需要修改两个文件就可以了。

四、解决的方法

1、跟网上的一致、我们需要修改项目目录下的（node_modules\gulp-rev\index.js） 

第134行    manifest[originalFile] = revisionedFile;

修改为:    manifest[originalFile] = originalFile + '?v=' + file.revHash;

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

第167行 regexp: new RegExp( prefixDelim + pattern, 'g' ),
修改为: regexp: new RegExp( prefixDelim + pattern + '(\\?v=\\w{10})?', 'g' ),
3、通过上面2步的修改，运行，得到我们想要的效果了，多次运行gulp命令，也没有问题了。 
<link rel="stylesheet" href="css/style.css?v=abe72b7358">
<script src="js/jquery.min.js?v=fbd2be1cfe"></script>
参考：http://blog.csdn.net/toouoo/article/details/78751861

https://segmentfault.com/a/1190000006204457