gulp 自动添加版本号
时间:2022-05-07
本文章向大家介绍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_modulesgulp-revindex.js 第144行
/*manifest[originalFile] = revisionedFile;*/
manifest[originalFile] = originalFile + '?v=' + file.revHash;
第二步:打开nodemodulesgulp-revnodemodulesrev-pathindex.js 第10行
(如果找不到此文件,则找到路径nodemodulesrev-pathindex.js 第10行进行修改)
/*return filename + '-' + hash + ext;*/
return filename + ext;
第三步:打开node_modulesgulp-rev-collectorindex.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然后运行试试。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- spring中的SpEL表达式
- 京喜小程序首页无障碍优化实践
- 几种排序算法
- 一天一大 leet(转变数组后最接近目标值的数组和)难度:中等 DAY-14
- 推荐一个生成后端模拟数据的懒人工具:lazy-mock
- django-rest-framework框架学习
- 弄懂这 5 个问题,拿下 Python 迭代器!
- 一天一大 leet(跳水板)难度:简单-Day20200708
- 百度一二三面!喜提提起批offer!别问,问就是牛逼!
- 一天一大 leet(计算右侧小于当前元素的个数)难度:困难-Day20200711
- Spring 下,关于动态数据源的事务问题的探讨
- 面试再问 HashMap,求你把这篇文章发给他!
- FestIN:一款功能强大的S3 Buckets数据内容搜索工具
- 一天一大 leet(地下城游戏)难度:困难-Day20200712
- 【MongoDB】mongodb4.4版本新特性