gulp 自动添加版本号

本文介绍利用 gulp-rev 和 gulp-rev-collector 进行版本管理

npm官网介绍使用后的效果如下:

"/css/style.css" => "/dist/css/style-1d87bebe.css"
"/js/script1.js" => "/dist/script1-61e0be79.js"
"cdn/image.gif"  => "//cdn8.example.dot/img/image-35c3af8134.gif"

gulp-rev: 对目标文件进行MD5计算序列值,更改文件名,生成键值对json文件(manifest文件,如上)

gulp-rev-collector: 根据manifest文件的对应关系,替换目标文件内的引用链接,效果如下:

<link rel="stylesheet" href="http://static.guojiang.tv/mobile/css/income.css"/>
替换后:
<link rel="stylesheet" href="http://static.guojiang.tv/mobile/css/income-e25a4c9a0d.css"/>

但这种更改文件名的方式 容易导致发布后由于种种原因导致某些文件找不到的问题。

所以我们想更改为如下的方式:

"activity/channel/2.css": "activity/channel/2.css?v=4ddaaeae28"
"activity/christmas.css": "activity/christmas.css?v=2d21a0c7ca"
"activity/channel/1.jpg": "activity/channel/1.jpg?v=c8571d8112"

即在不更改文件名,在引用的文件名后加?v=hashVal的方式。

需要我们手动更改这两个插件的源代码,如下:

第一步:打开node_modules\gulp-rev\index.js 第144行

/*manifest[originalFile] = revisionedFile;*/
manifest[originalFile] = originalFile + '?v=' + file.revHash;

第二步:打开nodemodules\gulp-rev\nodemodules\rev-path\index.js 第10行

(如果找不到此文件,则找到路径nodemodules\rev-path\index.js 第10行进行修改)

/*return filename + '-' + hash + ext;*/
return filename + ext;

第三步:打开node_modules\gulp-rev-collector\index.js 

第31行

/*if ( !_.isString(json[key]) || path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' ) !==  path.basename(key) ) {
          isRev = 0;
  }*/

  if ( !_.isString(json[key]) || path.basename(json[key]).split('?')[0] !== path.basename(key) ) {
          isRev = 0;
  }

第50行

/*return pattern.replace(/[\-\[\]\{\}\(\)\*\+\?\.\^\$\|\/\\]/g, "\\$&");*/
var rp = pattern.replace(/[\-\[\]\{\}\(\)\*\+\?\.\^\$\|\/\\]/g, "\\$&");
rp = pattern + "(\\?v=(\\d|[a-z]){8,10})*";
return rp;

第90行

/*patterns.push( escPathPattern( (path.dirname(key) === '.' ? '' : closeDirBySep(path.dirname(key)) ) + path.basename(key, path.extname(key)) )
                            + opts.revSuffix
                            + escPathPattern( path.extname(key) )
                        );*/

 patterns.push( escPathPattern( (path.dirname(key) === '.' ? '' : closeDirBySep(path.dirname(key)) ) + path.basename(key, path.extname(key)) )
                            + opts.revSuffix
                            + escPathPattern( path.extname(key) ) + "(\\?v=(\\d|[a-z]){8,10})*"
                        );

OK,这样就得到了如下的结果:

<img src="/img/common/tuhao.png?v=ee283a76b9">
<link rel="stylesheet" type="text/css" href="/css/forum.css?v=bf5de1c040">
<script type='text/javascript' src="/js/component/flexible.js?v=e2afd4dade"></script>
css中:
background: url(/img/all.png?v=d69570864e) no-repeat;

可能出现的问题:

权限问题,建议删除node_modules文件夹,把gulp插件重新构建 

npm install

如果不行,看下是否是windows下的gulp操作虚拟机中的文件,如果是,尝试在虚拟机中重新安装node npm gulp然后运行试试。

 gulpfile.js 源码参考

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏维C果糖

IntelliJ IDEA 中的版本控制介绍(中)

由于 IntelliJ IDEA 支持的版本控制工具非常的多,但咱们真正能够用到的也就两三个而已,因此在本篇博文中,咱们主要介绍 SVN、Git 和 GitHu...

21260
来自专栏菩提树下的杨过

VMware Fusion 中如何复制centos/linux虚拟机

今天想在mac本上,弄几个centos的虚拟机,尝试搭建hadoop的全分布环境。一台台虚拟机安装过去太麻烦了,想直接将现有的centos虚拟机复制几份完事,但...

29070
来自专栏张伟博客

SVN的备份及恢复

11840
来自专栏大内老A

ASP.NET Core管道深度剖析(2):创建一个“迷你版”的管道来模拟真实管道请求处理流程

从《ASP.NET Core管道深度剖析(1):采用管道处理HTTP请求》我们知道ASP.NET Core请求处理管道由一个服务器和一组有序的中间件组成,所以从...

22790
来自专栏游戏杂谈

Flash Builder 4安装SVN插件

flash builder与eclipse类似,装插件的方法也差不多。唯一要注意的时候是选择包的问题,如下图所示:

15530
来自专栏林德熙的博客

dotnet core 2.1 使用阶梯编译

在 dotnet core 2.1 可以使用阶梯编译的方法,从 dotnet framework 开始,在代码的所有方法在第一次进入的时候就需要使用 JIT 进...

8310
来自专栏后端技术探索

关于PHP脚本和浏览器连接深入解析

当 PHP 脚本正常地运行 NORMAL 状态时,连接为有效。当远程客户端中断连接时,ABORTED 状态的标记将会被打开。远程客户端连接的中断通常是由用户点击...

21610
来自专栏玄魂工作室

Python黑帽编程1.2 基于VS Code构建Python开发环境

0.1 本系列教程说明 本系列教程,采用的大纲母本为《Understanding Network Hacks Attack and Defense with ...

31170
来自专栏张戈的专栏

解决网站404页面返回200状态码问题

好久没打理博客,突然收到 CDN 流量预警,发现平均每天 40G 流量消耗!what?就现在这个访问量,不存在的。看了下 CDN 日志发现有小人一直在请求博客页...

35430
来自专栏数据结构笔记

Django搭建博客(六):为后台添加用户认证机制

Django有一套自带的身份认证模块,可以通过 from django.contrib import auth引入。

17020

扫码关注云+社区

领取腾讯云代金券