gulp自动添加版本号的实现

原创 fantasy525 随笔 gulp 302阅读 2017-05-11 16:09:20 举报

这个笔记记录一下昨天和今天自己给自己挖的坑吧
需求是给页面文件自动添加版本号,好吧,自己也不会,立马上网搜索需要用什么插件。
经过搜索发现了两个:gulp-rev,gulp-rev-collector
这两个需要配合使用,rev是用来生成hash值的并且会添加到资源文件上,会给资源文件的名字后面加上hash值
比如:default-803a7fe4ae.css,执行pipe(rev())后就会给原来的文件名加上hash,
rev-collector是收集rev生成的manifest文件里面的键值对,
javascript 代码

然后去替换html里面的链接的。
然后了解了其中的原理后我就去跳进坑了,我看如果不修改插件的话他们会给源文件的名字加个hash值,
然后我想改造成a.css?v=hash等这样子的,我意识上以为是要把源文件的名字给改成这样,
于是我就先照着网上的修改方法修改
javascript 代码

此时再执行gulp后会发现页面的链接变了加上了
<link rel="stylesheet" href="../css/default.css?v=803a7fe4ae">
<script src="../js/app.js?v=3a0d844594"></script>
此时还需要修改一个地方,不修改的话每次修改文件会会在原来的基础上增加版本号最后就变成了
<link rel="stylesheet" href="../css/default.css?v=33379df310?v=803a7fe4ae">
<script src="../js/app.js?v=3a0d844594?v=3a0d844594"></script>
所以要修改javascript 代码

,改到这里基本已经成功了,但是我还有个需求,这样看起来不知道版本迭代到了哪里
所以我想加个时间日期来记录
以天为区别
打开gulp-rev/index.js
修改大概在第144行的地方
javascript 代码

其实就是在v=后面拼接个时间上去,
最后这里关于组织重复添加版本号的修改我不确定是否要修改,因为我加了时间的原因我决定还是修改下正则吧

gulp自动添加版本号的实现
这里我增加了时间戳的匹配,但是我不确定是否正确
另外我即使不修改这个正则,也不会重复添加版本号的,原因可能是我每次build前都清理了dist下面的所有文件吧,所以每次都是只有一个

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复