分别安装gulp-rev、gulp-rev-collerctor、gulp-asset-rev,安装了的略过

npm install gulp-rev --save-dev

npm install gulp-rev-collerctor --save-dev

npm install gulp-asset-rev --save-dev

gulp-asset-rev是处理css图片路径哈希值的

打开node_modules\gulp-assets-rev\index.js

78行 var verStr = (options.verConnecter || "-") + md5;
更新为:var verStr = (options.verConnecter || "") + md5;
80行 src = src.replace(verStr, '').replace(/(\.[^\.]+)$/, verStr + "$1");
更新为:src=src+"?v="+verStr;

//版本号添加修改

.打开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行 return filename + '-' + hash + ext;
更新为: return filename + ext;

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

第一处修改为:

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

第二处修改为:

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

第三处修改为:

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})*"
);

可能因为版本更替,可能行号变了,具体以图为准

详情见图片 图片为修改后的内容

gulp 添加版本号 解决浏览器缓存问题的更多相关文章

  1. js 给url添加时间戳 解决浏览器缓存

    //解决浏览器缓存 function timestamp(url){      //  var getTimestamp=Math.random(); var getTimestamp=new Dat ...

  2. 给js加版本号解决浏览器缓存问题

    我们知道打开网页时浏览器会加载需要的资源,比如图片.音频.js文件.css文件等.并且会把这些资源作为缓存保存下来,再次打开网页时缓存好的资源就不需要再次加载了.但是,这样有一个问题,就是当程序猿更新 ...

  3. vue cli3.0 build 打包 的 js 文件添加版本号 解决 js 缓存问题

    在 vue.config.js 的文件中加入下面这段话 // vue.config.jsconst Timestamp = new Date().getTime();module.exports = ...

  4. 给url添加时间戳,解决浏览器缓存

    //解决浏览器缓存function timestamp(url){ // var getTimestamp=Math.random(); var getTimestamp=new Date().get ...

  5. 在Js或者cess后加版本号 防止浏览器缓存

    在Js或者cess后加版本号 防止浏览器缓存 客户端浏览器会缓存css或js文件,从而减少加载次数,减少流量,提高网页的访问速度.为了使得每次修改js或者css能生效,可以通过改变版本号来使得客户端浏 ...

  6. js进阶解决浏览器缓存不能自动更新的问题(在ajax的url上带上一个参数,可以是日期,或者是随机数)(随机数Math.random)(取得日期的毫秒数:new Date().getTime();)

    js进阶解决浏览器缓存不能自动更新的问题(在ajax的url上带上一个参数,可以是日期,或者是随机数)(随机数Math.random)(取得日期的毫秒数:new Date().getTime();) ...

  7. 使用gulp添加版本号

    由于js和css的缓存问题,所以,希望在html上给js和css添加上版本号. 常见的用法是使用gulp-rev和gulp-rev-collector进行操作.使用这两个插件,得到的效果如下图所示: ...

  8. 学习笔记:Maven构造版本号的方法解决浏览器缓存问题

    需要解决的问题 在做WEB系统开发时,为了提高性能会利用浏览器的缓存功能,其实即使不显式的申明缓存,现代的浏览器都会对静态文件(js.css.图片之类)缓存.但也正因为这个问题导致一个问题,就是资源的 ...

  9. js 给链接 url或href或js、css、图片等解决浏览器缓存

    一. 添加时间戳 情况一.链接是常量 var rand = new Date().getTime(); var aLen=document.getElementsByTagName("a&q ...

随机推荐

  1. go学习day3

    strings和strconv使用 1.strings.HasPrefix(s string, prefix string) bool:判断字符串s是否以prefix开头 2.strings.HasS ...

  2. P1033自由落体

    传送 杯具wa,惨痛的教训————别写一些情况多到要打表的判断,写着写着就wa了 这个题,我主要死在判断上了 第一遍20分的思路:看小车此时跨越几个整数点.因为我求出了此时小车的车头坐标和车尾坐标.然 ...

  3. P2871 手链

    传送 这个题的数据限制没有翻译出来,所以有可能产生爆内存现象 再此翻译一下:1<=n(物品个数)<=3402,1<=M(总重量)<=12880 (就这两个有点用) 显然这是一个 ...

  4. defaultProps和propTypes

    在上一篇文章中总结了父子组件的数据传递,下面先来简单的回顾一下之前的内容: 此时,子组件中div里面的数据依赖于父组件传递过来的数据,那么当父组件没有给子组件传递数据时,子组件div里面就没有了数据了 ...

  5. OSI七层

    应用层 应用程序的通信服务 telnet.HTTP.FTP.NFS.SMTP 表示层 定义数据格式和加密 加密.ASCII 会话层 如何开始.控制.结束一个会话,包括多个双向消息的控制和管理,以便在只 ...

  6. [UE4]UMG编辑器:中心点对齐

  7. MySQL 之主从同步-半同步模式配置

    从MySQL5.5开始,MySQL以插件的形式支持半同步复制.如何理解半同步呢?首先我们来看看异步,全同步的概念 异步复制(Asynchronous replication) MySQL默认的复制即是 ...

  8. MySQL MHA 搭建&测试(环境:CentOS7 + MySQL5.7.23)

    MySQL MHA架构介绍: MHA(Master High Availability)目前在MySQL高可用方面是一个相对成熟的解决方案,它由日本DeNA公司youshimaton(现就职于Face ...

  9. FileMaker Server 15 Windows 安装

    FileMaker 国外流行,国内研究的人不多.这玩意的好处是: 标准的数据库软件,同时带界面,相当于Access. 手机上安装FileMaker Go,Windows & IOS上安装 Fi ...

  10. Vue百度搜索

    <!DOCTYPE html><html lang="en"><head> <meta charset="GBK"&g ...