前端静态资源版本更新利用gulp自动化添加版本号

项目每次发布后，会有缓存问题，导致页面不更新，尤其是微信浏览器，缓存情况更为严重。然后利用gulp 给js，css自动化添加版本号，可解决缓存的问题。
网上资料中一般有两个方法
1.生成一个新的dist目录，里面包含了要发布的html,js,css等文件 。
2.在原来的HTML文件上进行js ,css版本的替换，不需要生成新的目录文件。

网上介绍的版本都比较旧，以下为最新gulp版本的修改方案：

一 、要实现的效果.

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

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

要达到的效果：在原结构下html文件代码

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

二 、实现步骤

1.安装node然后安装gulp和gulp插件：

npm install --save-dev gulp@3.9.1
npm install --save-dev  gulp-rev@8.1.0
npm install --save-dev gulp-rev-collector@1.2.3
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文件路径，是本地css,js文件的路径，可自行配置

  var cssUrl = 'css/*.css',   
  jsUrl = 'js/*.js';

//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'));
 });

//Html更换css、js文件版本

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

//开发构建

  gulp.task('dev', function (done) {   
  condition = false;   
  runSequence(       
  ['revCss'],       
  ['revJs'],        
  ['revHtml'],        
  done);});
  gulp.task('default', ['dev']);

三.更改gulp-rev和gulp-rev-collector(重要)

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

    第144行 manifest[originalFile] = revisionedFile;
    更新为: manifest[originalFile] = originalFile + '?v=' + file.revHash;

给文件名增加?v=hash的后缀
注意： 由于gulp-rev的版本不同，代码行修改位置可能有变换。

2.打开nodemodules\gulp-rev\nodemodules\rev-path\index.js
找到return modifyFilename方法 ，更改为:

    return modifyFilename(pth, (filename, ext) => `${filename}${ext}`);

3.打开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];

然后 修改178行左右为：

 //增加正则后缀，以防止每次都追加?v=hash

                   var afterDelim = '[\?A-Za-z0-9_\=]*' 
                    changes.push({
                        regexp: new RegExp( prefixDelim + pattern+afterDelim, 'g' ), //增加后缀匹配
                        patternLength: pattern.length,
                        replacement: '$1' + manifest[key]
                    });

四.执行gulp命令，得到的结果如下

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

五.更改gulp-rev和gulp-rev-collector的原理
当你完成第二步gulpfile.js的编写，然后执行gulp后，你会发现效果如下:
//rev目录下生成了manifest.json对应文件

   { "style.css": "style-0d83247610.css"}
    <link rel="stylesheet" href="../css/style-0d83247610.css">
    <script src="../js/index-61c1ef9f34.js"></script>

这明显没有达到我们想要的效果，所以要按照第三步的要求更改代码！