需要用到的Gulp外掛：
1、gulp-rev
2、gulp-rev-format
3、gulp-rev-replace

要實現html中增加版本號的效果：

<link rel="stylesheet" href="/Public/css/lib/base.css?v=1478084239"/>
<link rel="stylesheet" href="/Public/css/lib/common.css?v=1478084239"/>
<script src="/Public/js/dist/jquery.js?v=a145s55d44d"></script>
<script src="/Public/js/requirejs/require.js?v=a145s55d44d"></script>
 

把gulp-rev的配置程式碼粘貼出來,gulp-rev幫我們生成一個版本清單檔案：rev-manifest.json（這個檔名和路徑都是可以在配置裡修改的哦！在這裡我們外掛給我們提供的檔名）

// 生成版本號清單
gulp.task('rev', () => {
  gulp.src(['Public/**/*.*'])
    .pipe($.rev())
    .pipe($.revFormat({
      prefix: '.', // 在版本號前增加字元
      suffix: '.cache', // 在版本號後增加字元
      lastExt: false
    }))
    .pipe($.rev.manifest())
    .pipe(gulp.dest("app/"));
});
 

$.rev():是蒐集/Public下所有的靜態資原始檔；
$.rev.manifest()：把蒐集的到資料儲存到rev-manifest.json檔案裡，儲存位置放到了app資料夾下；
$.revFormat():修改清單檔案裡的版本格式；

修改清單檔案的版本號前程式碼片段：

{
  "admin.js": "admin-2825b6db08.js",
  "app.css": "app-2b10bb06d3.css",
  "app.js": "app-4195b63b87.js",
  "area.js": "area-06366f2832.js",
  "aspect.js": "aspect-6eef3ee475.js",
  "captcha.js": "captcha-a74b9f7786.js",
  "cookie.js": "cookie-0bc8164254.js",
  "data.tpl.js": "data-0020e7582b.tpl.js",
  "download.js": "download-c8dc54cd43.js",
}
 

修改清單檔案的版本號後代碼片段：

{
  "admin.css": "admin.69cef10fff.cache.css",
  "admin.js": "admin.2825b6db08.cache.js",
  "app.css": "app.2b10bb06d3.cache.css",
  "app.js": "app.4195b63b87.cache.js",
  "area.js": "area.06366f2832.cache.js",
  "aspect.js": "aspect.6eef3ee475.cache.js",
  "captcha.js": "captcha.a74b9f7786.cache.js",
  "cookie.js": "cookie.0bc8164254.cache.js",
  "data.tpl.js": "data.0020e7582b.cache.tpl.js",
  "download.js": "download.c8dc54cd43.cache.js",
}

增了$.revFormat()之後，在清單檔案裡增加了“.cache”字串，他有什麼用呢？


版本清單生成了，接下就是替換檔案中的版本號；

gulp.task('add-version',['rev'], function() {
    var manifest = gulp.src(["./app/rev-manifest.json"]);
    function modifyUnreved(filename) {
      return filename;
    }
    function modifyReved(filename) {
      // filename是：admin.69cef10fff.cache.css的一個檔名
      // 在這裡才發現剛才用gulp-rev-format的作用了吧？就是為了做正則匹配，
      if (filename.indexOf('.cache') > -1) {
	// 通過正則和relace得到版本號：69cef10fff
        const _version = filename.match(/\.[\w]*\.cache/)[0].replace(/(\.|cache)*/g,"");
	// 把版本號和gulp-rev-format生成的字元去掉，剩下的就是原檔名：admin.css
        const _filename = filename.replace(/\.[\w]*\.cache/,"");
	// 重新定義檔名和版本號：admin.css?v=69cef10fff
        filename = _filename + "?v=" + _version;
	// 返回由gulp-rev-replace替換檔名
        return filename;
      }
      return filename;
    }
    gulp.src(['View/**/**.html']) 
      // 刪除原來的版本 
      .pipe($.replace(/(\.[a-z]+)\?(v=)?[^\'\"\&]*/g,"$1")) 
      .pipe($.revReplace({
      manifest: manifest,
      modifyUnreved: modifyUnreved,
      modifyReved: modifyReved
    }))  
    .pipe(gulp.dest('View/'));
});

$.revReplace():是在版本號替換前和替換後都會有呼叫一個函式，


使用$.revReplace()時我們要注意一下第一次替換版本號，和第二次替換版本號是不一樣的；


$.replace():的作用就是把第一次生成的版本號替換掉。舉例說明：
替換前的檔案 

<link rel="stylesheet" href="/Public/css/lib/base.css"/>

第一次替換後的檔案 

<link rel="stylesheet" href="/Public/css/lib/base.css?v=1478084239"/>

第二次替換後的檔案

<link rel="stylesheet" href="/Public/css/lib/base.css?v=1478084239?v=1478084239"/>

所以在替換版本號前先執行一下替換：$.replace(/(\.[a-z]+)\?(v=)?[^\'\"\&]*/g,"$1")


$.replace中包含了“(v=)?”的意思是：在原專案有一些增加了版本號的檔案，不像v=123456這種格式的，如：

<link rel="stylesheet" href="/Public/css/lib/userinfo.css?123647897"/>

所心(v=)?的意思就是匹配零次或一次；

$.replace中包含了“[^\'\"\&]”的意思是：匹配的檔案的結尾是以分號、逗號、&符為分割；如：
匹配到的是：js?123644

<link rel="stylesheet" href="/Public/js/lib/userinfo.js?123644&u=name"/>

匹配到的是空字元

<link rel="stylesheet" href="/Public/js/lib/userinfo.js"/>

匹配到的是空字元

<link rel="stylesheet" href='/Public/js/lib/userinfo.js'/>

完整程式碼把src和dest中的檔案路徑替換一下：

// 生成版本號清單
gulp.task('rev', () => {
  gulp.src(['../assets/**/*.*'])
    .pipe($.rev())
    .pipe($.revFormat({
      prefix: '.',
      suffix: '.cache',
      lastExt: false
    }))
    .pipe($.rev.manifest())
    .pipe(gulp.dest("app/"));
});


gulp.task('add-version',['rev'], function() {
    var manifest = gulp.src(["./app/rev-manifest.json"]);
    function modifyUnreved(filename) {
      return filename;
    }
    function modifyReved(filename) {
      if (filename.indexOf('.cache') > -1) {
        const _version = filename.match(/\.[\w]*\.cache/)[0].replace(/(\.|cache)*/g,"");
        const _filename = filename.replace(/\.[\w]*\.cache/,"");
        filename = _filename + "?v=" + _version;
        return filename;
      }
      return filename;
    }
    gulp.src(['../View/**/**.html']) 
      .pipe($.replace(/(\.[a-z]+)\?(v=)?[^\'\"\&]*/g,"$1")) 
      .pipe($.revReplace({
      manifest: manifest,
      modifyUnreved: modifyUnreved,
      modifyReved: modifyReved
    }))  
    .pipe(gulp.dest('../View/'));
});

本人技術水平有限，如果您有其它解決方案或建議請留言交流！