问题:

当我们修改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自动化添加版本号并修改为参数格式相关推荐

  1. gulp自动添加版本号

    gulp自动添加版本号的一些注意事项 方法操作见大神博客: 1.https://segmentfault.com/a/1190000006204457 2.https://segmentfault.c ...

  2. gulp+自动化编译html,gulp自动化构建html静态资源路径版本号添加和替换

    gulp 在使用gulp自动添加版本号时稍作一点修改,欢迎指正. 我使用的是(gulp-rev+gulp-rev-collector),但是每次自动化构建都是依赖rev生成的json文件: " ...

  3. 修改 Zotero 参考文献格式

    文章目录 修改 Zotero 参考文献格式 一.查找zotero已有的参考文献格式 1."编辑"->"首选项"->"获取更多样式--&qu ...

  4. html自动给js添加版本号,通过gulp 在原html文件上自动化添加js、css版本号

    所需gulp插件: gulp gulp-rev-dxb 为静态文件随机添加一串hash值,解决缓存问题.根据静态资源内容,生成md5签名,打包出来的文件名会加上md5签名,同时生成一个json用来保存 ...

  5. gulp添加版本号?v=

    1,说明:使用gulp为js和css静态文件添加版本号,升级服务器代码后,可以不用强制更新浏览器或清空缓存,优化用户体验. 本文主要参考http://www.jb51.net/article/1006 ...

  6. Android Studio Gradle实践之多渠道自动化打包+版本号管理

    转: Android Studio Gradle实践之多渠道自动化打包+版本号管理 上次介绍了Android Studio的安装.配置和基本使用.这次讲一下Android Studio用到的打包工具G ...

  7. golang程序添加版本号

    golang程序添加版本号 这段时间项目经常发布版本,导致我们版本管理混乱.特别是在真实环境上面,没有了版本控制软件协助版本管理,我们无法确认程序到底是新版本还是旧版本.这给我们排查问题带来了很大困扰 ...

  8. linux 程序、动态库、静态库内部添加版本号和编译时间

    2019独角兽企业重金招聘Python工程师标准>>> 给程序和库添加版本号和库,有利于维护和升级. 当然你可以在文件名上体现,比如有个程序叫 yun,文件名写为 yun_1.0.2 ...

  9. linux中查询动态库版本的命令,linux 程序、动态库、静态库内部添加版本号和编译时间详解...

    给程序和库添加版本号和库,有利于维护和升级. 当然你可以在文件名上体现,比如有个程序叫 yun,文件名写为 yun_1.0.2,但这个需要每次手动维护,而且不能100%确保当前程序就是那个版本.所以, ...

最新文章

  1. input type=range标签用法实例代码
  2. 【Linux】【服务器】 CentOS7下安装MySQL详细过程步骤
  3. Scrapy爬虫入门系列2 示例教程
  4. SQL Server 2005中的分区表
  5. Knockoutjs Component问题汇总
  6. matlab学习笔记第七章——常微分方程(ODE)的数值解
  7. [原]从一个链接错误探究GCC的链接库顺序
  8. 最近 搞定这5篇 java相关
  9. NoSQL数据库兴起
  10. win7 mysql 未响应_求助啊 WIN7下安装mysql出问题 老是说未响应~!!
  11. 地理信息地图标记KML与KMZ的区别
  12. Hexo博客使用 Next主题 后的一些相关配置 记录
  13. Derek Sivers:我是一个慢思考者(译)
  14. SpringMVC使用websocke
  15. 水下环境线结构光传感器的校正模型
  16. (NCRE网络技术)网络系统结构与设计的基本原则-知识点
  17. 华为鸿蒙系统穿戴app,华为应该如何盘活鸿蒙系统?
  18. 老年人怎么办理美国旅游签证?
  19. python数据分析实战之阿里巴巴股票行情分析
  20. Linux shell:fsck命令使用方法

热门文章

  1. ftp 批量上传文件命令
  2. asp.net中XmlDocument解析出现出错,处理特殊字符
  3. snort简介以及在Ubuntu下的安装
  4. (node:2612) DeprecationWarning: collection.ensureIndex is deprecated. Use createIndexes instead.
  5. 零基础带你学习MySQL—分组统计(十二)
  6. 曾辉机器人_奋进者曾辉:在润物无声中深植教育初心
  7. 老电脑慢得像蜗牛还有救吗?
  8. 热水器是长期开着好还是要等到用的时候才开?
  9. 为什么办理房产证要经过开发商和物业?
  10. 想买楼下邻居的那套房,彼此熟悉,这种情况还用找中介付中介费吗?