使用gulp为项目中的文件自动添加版本号之实践思路

需要用到的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/'));});

本人技术水平有限，如果您有其它解决方案或建议请留言交流！