gulp自动化添加版本号并修改为参数格式
问题:
当我们修改js和css文件时往往需要清除浏览器的缓存,否则有些效果就看不到更新过后的。
通过对js,css文件内容进行hash运算,生成一个文件的唯一hash字符串(如果文件修改则hash号会发生变化)
替换html中的js,css文件名,生成一个带版本号的文件名,这样加版本号的静态文件就不会存在缓存的问题了。
解决:
我的当前版本
"gulp-rev": "7.1.2","gulp-rev-collector": "1.2.4","rev-path": "^2.0.0",
gulp有自动化添加版本hash的插件gulp-rev,它的效果是更改文件名,如下
<link rel="stylesheet" href="./css/jquery.e-calendar-de29b48f93.css"><link rel="stylesheet" href="./css/base-8688d776d1.css"><link rel="stylesheet" href="./css/style-93423ee3ca.css">
gulp直接更改了文件名,而我们想要的效果则是下面这种添加版本号。
<link rel="stylesheet" href="./css/jquery.e-calendar.css?v=de29b48f93"><link rel="stylesheet" href="./css/base.css?v=8688d776d1"><link rel="stylesheet" href="./css/style.css?v=93423ee3ca">
所以我们需要更改一下gulp的文件,更改gulp-rev和gulp-rev-collector
打开node_modules\gulp-rev\index.js
第144行 manifest[originalFile] = revisionedFile;更新为:
manifest[originalFile] = originalFile + '?v=' + file.revHash;
打开nodemodules\gulp-rev\nodemodules\rev-path\index.js
第9行 return modifyFilename(pth, (filename, ext) => `${filename}-${hash}${ext}`);更新为:return modifyFilename(pth, (filename, ext) => `${filename}${ext}`);
打开node_modules\gulp-rev-collector\index.js
第40行 let cleanReplacement = path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' );修改为:let cleanReplacement = path.basename(json[key]).split('?')[0];
再执行gulp命令,得到的结果如下(效果正确):
<link rel="stylesheet" href="../css/default.css?v=803a7fe4ae">
<script src="../js/app.js?v=3a0d844594"></script>
转载于:https://www.cnblogs.com/diyxiaoshitou/p/9022105.html
gulp自动化添加版本号并修改为参数格式相关推荐
- gulp自动添加版本号
gulp自动添加版本号的一些注意事项 方法操作见大神博客: 1.https://segmentfault.com/a/1190000006204457 2.https://segmentfault.c ...
- gulp+自动化编译html,gulp自动化构建html静态资源路径版本号添加和替换
gulp 在使用gulp自动添加版本号时稍作一点修改,欢迎指正. 我使用的是(gulp-rev+gulp-rev-collector),但是每次自动化构建都是依赖rev生成的json文件: " ...
- 修改 Zotero 参考文献格式
文章目录 修改 Zotero 参考文献格式 一.查找zotero已有的参考文献格式 1."编辑"->"首选项"->"获取更多样式--&qu ...
- html自动给js添加版本号,通过gulp 在原html文件上自动化添加js、css版本号
所需gulp插件: gulp gulp-rev-dxb 为静态文件随机添加一串hash值,解决缓存问题.根据静态资源内容,生成md5签名,打包出来的文件名会加上md5签名,同时生成一个json用来保存 ...
- gulp添加版本号?v=
1,说明:使用gulp为js和css静态文件添加版本号,升级服务器代码后,可以不用强制更新浏览器或清空缓存,优化用户体验. 本文主要参考http://www.jb51.net/article/1006 ...
- Android Studio Gradle实践之多渠道自动化打包+版本号管理
转: Android Studio Gradle实践之多渠道自动化打包+版本号管理 上次介绍了Android Studio的安装.配置和基本使用.这次讲一下Android Studio用到的打包工具G ...
- golang程序添加版本号
golang程序添加版本号 这段时间项目经常发布版本,导致我们版本管理混乱.特别是在真实环境上面,没有了版本控制软件协助版本管理,我们无法确认程序到底是新版本还是旧版本.这给我们排查问题带来了很大困扰 ...
- linux 程序、动态库、静态库内部添加版本号和编译时间
2019独角兽企业重金招聘Python工程师标准>>> 给程序和库添加版本号和库,有利于维护和升级. 当然你可以在文件名上体现,比如有个程序叫 yun,文件名写为 yun_1.0.2 ...
- linux中查询动态库版本的命令,linux 程序、动态库、静态库内部添加版本号和编译时间详解...
给程序和库添加版本号和库,有利于维护和升级. 当然你可以在文件名上体现,比如有个程序叫 yun,文件名写为 yun_1.0.2,但这个需要每次手动维护,而且不能100%确保当前程序就是那个版本.所以, ...
最新文章
- input type=range标签用法实例代码
- 【Linux】【服务器】 CentOS7下安装MySQL详细过程步骤
- Scrapy爬虫入门系列2 示例教程
- SQL Server 2005中的分区表
- Knockoutjs Component问题汇总
- matlab学习笔记第七章——常微分方程(ODE)的数值解
- [原]从一个链接错误探究GCC的链接库顺序
- 最近 搞定这5篇 java相关
- NoSQL数据库兴起
- win7 mysql 未响应_求助啊 WIN7下安装mysql出问题 老是说未响应~!!
- 地理信息地图标记KML与KMZ的区别
- Hexo博客使用 Next主题 后的一些相关配置 记录
- Derek Sivers:我是一个慢思考者(译)
- SpringMVC使用websocke
- 水下环境线结构光传感器的校正模型
- (NCRE网络技术)网络系统结构与设计的基本原则-知识点
- 华为鸿蒙系统穿戴app,华为应该如何盘活鸿蒙系统?
- 老年人怎么办理美国旅游签证?
- python数据分析实战之阿里巴巴股票行情分析
- Linux shell:fsck命令使用方法
热门文章
- ftp 批量上传文件命令
- asp.net中XmlDocument解析出现出错,处理特殊字符
- snort简介以及在Ubuntu下的安装
- (node:2612) DeprecationWarning: collection.ensureIndex is deprecated. Use createIndexes instead.
- 零基础带你学习MySQL—分组统计(十二)
- 曾辉机器人_奋进者曾辉:在润物无声中深植教育初心
- 老电脑慢得像蜗牛还有救吗?
- 热水器是长期开着好还是要等到用的时候才开?
- 为什么办理房产证要经过开发商和物业?
- 想买楼下邻居的那套房,彼此熟悉,这种情况还用找中介付中介费吗?