使用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/'));
});
本人技术水平有限，如果您有其它解决方案或建议请留言交流！