公司項(xiàng)目每次發(fā)布后，偶爾會(huì)有緩存問(wèn)題，然后看了下gulp，發(fā)現(xiàn)gulp還能給js，css自動(dòng)化添加版本號(hào)，可解決緩存的問(wèn)題，所以自動(dòng)化實(shí)現(xiàn)靜態(tài)資源的版本更新才是正道。通過(guò)網(wǎng)上的資料試過(guò)了兩種辦法：

1.生成一個(gè)新的dist目錄，里面包含了要發(fā)布的html,js,css等文件 。

2.在原來(lái)的HTML文件上進(jìn)行js ,css版本的替換，不需要生成新的目錄文件。

通過(guò)兩種方法的實(shí)踐過(guò)程對(duì)比，決定使用第二種辦法，所以這里介紹一下第二種方式的實(shí)現(xiàn)過(guò)程：

一.

1. 修改js和css文件

2. 通過(guò)對(duì)js,css文件內(nèi)容進(jìn)行hash運(yùn)算，生成一個(gè)文件的唯一hash字符串(如果文件修改則hash號(hào)會(huì)發(fā)生變化)

3. 替換原h(huán)tml中的js,css文件名，生成一個(gè)帶版本號(hào)的文件名

原結(jié)構(gòu)下html文件代碼：
<link rel="stylesheet" href="../css/style.css">
<script src="../js/index.js"></script>

要達(dá)到的效果：在原結(jié)構(gòu)下html文件代碼

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

二.

1.作為項(xiàng)目的開發(fā)依賴（devDependencies）安裝gulp和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

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文件名對(duì)照映射

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

//js生成文件hash編碼并生成 rev-manifest.json文件名對(duì)照映射

  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文件的路徑一致*/
 });

//開發(fā)構(gòu)建

  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;
  2.打開nodemodules\gulp-rev\nodemodules\rev-path\index.js
    10行 return filename + '-' + hash + ext;
    更新為: return filename + ext;
  3.打開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) ) {</br>

四.執(zhí)行g(shù)ulp命令，得到的結(jié)果如下

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

五.更改gulp-rev和gulp-rev-collector的原理

 當(dāng)你完成第二步gulpfile.js的編寫，然后執(zhí)行g(shù)ulp后，你會(huì)發(fā)現(xiàn)效果如下:
 //rev目錄下生成了manifest.json對(duì)應(yīng)文件
   { "style.css": "style-0d83247610.css"}
    <link rel="stylesheet" href="../css/style-0d83247610.css">
    <script src="../js/index-61c1ef9f34.js"></script>
 這明顯沒有達(dá)到我們想要的效果，所以要按照第三步的要求更改代碼！