原理

1、修改js和css文件
2、通过对js,css文件内容进行hash运算，生成一个文件的唯一hash字符串(如果文件修改则hash号会发生变化)
3、替换html中的js,css文件名，生成一个带版本号的文件名

• 原html文件代码

<link rel="stylesheet" href="css/common.css"/>
<script type="text/javascript" src="js/simper_posterTvGrid.js"></script>
<img src="images/simper_logo.png" width="298" height="53" class="logo"/>

• 预期效果：在原目录结构下html文件代码

<link rel="stylesheet" href="css/common.css?v=c59c2ee7e8"/>
<script type="text/javascript" src="js/simper_posterTvGrid.js?v=3576a6e73c"></script>
<img src="images/simper_logo.png?v=ed4b91c157" width="298" height="53" class="logo"/>

先说说gulp的使用步骤

安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务
详细步骤见链接 http://www.ydcss.com/archives/18

• 下面回到正题，如果给静态资源文件自动添加版本号

1：安装gulp和gulp插件

 打开命令指示符（cmd）执行
 ```

npm install --save-dev gulp
npm install --save-dev gulp-rev
npm install --save-dev gulp-rev-collector
npm install --save-dev run-sequence
```
2：编写gulpfile.js

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

//定义css、js、img文件路径，是本地css,js,img文件的路径，可自行配置
var cssUrl = 'css/*.css',   
    jsUrl = 'js/*.js';    
    imageUrl = 'images/*';

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

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

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

//Html更换css、js、img文件版本
gulp.task('revHtml', function () {   
    return gulp.src(['rev/**/*.json', './*.html'])  /*./是本地html文件的路径，可自行配置*/       
        .pipe(revCollector())        
        .pipe(gulp.dest('.'));  /*Html更换css、js文件版本,.也是和本地html文件的路径一致*/});

//开发构建
gulp.task('dev', function (done) {   
    condition = false;   
    runSequence(        
        ['revCss'],        
       ['revJs'],        
       ['revImg'],       
       ['revHtml'],        
       done);
});

gulp.task('default', ['dev']);

执行gulp命令后的效果

//rev目录下生成了manifest.json对应文件
{ "common.css": "common-803a7fe4ae.css"}
<link rel="stylesheet" href="css/common-803a7fe4ae.css"/>
<img src="images/simper_logo-803a7fe4ae.png" width="298" height="53" class="logo"/>
<script type="text/javascript" src="js/simper_posterTvGrid-803a7fe4ae.js"></script>

很显然这不是我们需要的效果

3.更改gulp-rev和gulp-rev-collector

打开node_modules\gulp-rev\index.js
第144行 manifest[originalFile] = revisionedFile;
更新为: manifest[originalFile] = originalFile + '?v=' + file.revHash;

打开node_modules\gulp-rev\node_modules\rev-path\index.js
10行 return filename + '-' + hash + ext;
更新为: return filename + ext;

打开node_modules\gulp-rev-collector\index.js
31行if ( !_.isString(json[key]) || path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' ) !== path.basename(key) ) {
更新为: if ( !_.isString(json[key]) || path.basename(json[key]).split('?')[0] !== path.basename(key) ) {

再执行gulp命令，得到的结果如下(效果正确):

<link rel="stylesheet" href="css/common.css?v=c59c2ee7e8"/>
<img src="images/simper_logo.png?v=ed4b91c157" width="298" height="53" class="logo"/>
<script type="text/javascript" src="js/simper_posterTvGrid.js?v=cbb4fc4f8a"></script>

但是假如我们更改了css和js后，再执行gulp命令，得到的结果会如下:

<link rel="stylesheet" href="css/common.css?v=c59c2ee7e8?v=803a7fe4ae"/>
<img src="images/simper_logo.png?v=ed4b91c157?v=3a0d844594" width="298" height="53" alt="牛客" class="logo"/>
<script type="text/javascript" src="js/simper_posterTvGrid.js?v=cbb4fc4f8a?v=33379df310"></script>

有没有发现，会在版本号后面再添加一个版本号，因为gulp只替换了原来文件名，这样又不符合预期效果了，所以我们想到，还需要修改插件的替换正则表达式。

4.继续更改gulp-rev-collector

打开node_modules\gulp-rev-collector\index.js
第107行 regexp: new RegExp( '([\/\\\\\'"])' + pattern, 'g' ),
更新为: regexp: new RegExp( '([\/\\\\\'"])' + pattern+'(\\?v=\\w{10})?', 'g' ),

现在你不管执行多少遍gulp命令，得到的html效果都是

<link rel="stylesheet" href="css/common.css?v=c59c2ee7e8"/>
<img src="images/simper_logo.png?v=ed4b91c157" width="298" height="53" class="logo"/>
<script type="text/javascript" src="js/simper_posterTvGrid.js?v=cbb4fc4f8a"></script>

完美解决！！！！