分别安装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. Android 引用库项目,Debug 库项目

    转自:http://www.cnblogs.com/xitang/p/3615768.html#commentform 使用引用项目,无法追到源代码,无法Debug库项目The JAR of this ...

  2. 【剑指offer】逆序输出链表

    输入一个链表,按链表值从尾到头的顺序返回一个ArrayList. *考察栈的使用 *使用循环输出Stack中内容的时候,不能使用for(int i; i<stack.size();i++)因为s ...

  3. onunload事件火狐不支持,在IE浏览器中,只有刷新时该事件才发生

    onunload事件火狐不支持,在IE浏览器中,只有刷新时该事件才发生

  4. 使用Spring MockMVC对controller做单元测试(转)

    https://www.cnblogs.com/ylty/p/6420738.html 1.对单一controller做测试. import org.junit.Before; import org. ...

  5. 方法 - ShellCode测试

    机器码->汇编 1 // ShellCode测试.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <windo ...

  6. ubuntu 间简单相互通信

    1.  nc  命令 在一台机器上运行nc -l 来监听本机的2222号端口 另外一台机器就能连接到这台监听的机器上,假设上面那台机器的ip是192. nc 之后就能互相发送字符了 2. iptux通 ...

  7. BGP属性+13条选路原则(转载)

    原文:http://blog.sina.com.cn/s/blog_be409c2f0102x6sg.html BGP(Border Gateway Protocol)边界网关协议 BGP(Borde ...

  8. [UE4]运行时进入观察模式

  9. 移动端动态font-size

    /** * Created by shimin on 2017/8/18. *///计算dpr!function(win, lib) { var timer, doc = win.document, ...

  10. echarts学习之——电力迁徙图

    今天主要就是在搞echarts,我们都知道他为我们提供了丰富的api方法,使我们能够迅速的搭建图标.同时他里面还有许多的案例, 其中就有这么一个国内航线模拟迁徙的地图,如下所示: 而我们通常因为各种需 ...