使用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得到版本号：69cef10fffconst _version = filename.match(/\.[\w]*\.cache/)[0].replace(/(\.|cache)*/g,"");// 把版本号和gulp-rev-format生成的字符去掉，剩下的就是原文件名：admin.cssconst _filename = filename.replace(/\.[\w]*\.cache/,"");// 重新定义文件名和版本号：admin.css?v=69cef10ffffilename = _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/'));
});

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

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

为js和css文件自动添加版本号
参考:http://flyash.itcao.com/post_914.html and http://www.particletree.com/notebook/automatically-v ...
java web配置dll文件_JavaWeb项目中dll文件动态加载方法解析（详细步骤）
相信很多做Java的朋友都有过用Java调用JNI实现调用C或C++方法的经历,那么Java Web中又如何实现DLL/SO文件的动态加载方法呢.今天就给大家带来一篇JAVA Web项目中DLL/SO ...
（转） eclipse项目中.classpath文件详解
背景:对于java项目中.classpath文件中的相关定义一直不是很了解,有必要进行深入的学习. 1 前言在使用eclipse或者myeclipse进行Java项目开发的时候,每个project( ...
java调用项目中的文件_详解eclipse项目中.classpath文件的使用
1 前言在使用eclipse或者myeclipse进行java项目开发的时候,每个project(工程)下面都会有一个.classpath文件,那么这个文件究竟有什么作用? 2 作用 .classp ...
Android：Android NDK项目中C++文件中打印日志
Android NDK项目中C++文件中打印日志工作需要,在NDK项目中的C++文件中打印日志,还是费了点劲查找才达到自己想要的效果了. 步骤添加头文件添加头文件定义宏函数 #includ ...
ide项目文件夹浅黄色编写代码无提示或看不到项目中的文件夹
JetBrains ide全家桶ide都可能出现此情况,项目文件左上角选择为项目时不展示src等包/文件夹,只有选择Project Files时才会显示项目中的文件夹,一般出现此情况都是因为进行了删除 ...
C#项目中一些文件类型说明
C#项目中一些文件类型说明 designer.cs 是窗体设计器生成的代码文件,作用是对窗体上的控件做初始化工作(在函数InitializeComponent()中)VS2003以前都把这部分代码放到 ...
springboot项目中pom文件parent报错的解决方法
springboot项目中pom文件parent报错的解决方法 1:首先配置maven环境 2:修改maven的settings.xml文件 3:用编辑器修改settings文件 4:设置Eclips ...
在VS2013以及Linux系统中利用SVN自动更新版本号
1.在VS2013中利用SVN自动更新版本号 (1).方法一:利用subwcrev.exe中的宏: $WCREV$ : 获取SVN的版本号 $WCURL$ : 获取SVN的地址关于subwcrev. ...

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

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

最新文章

热门文章