分别安装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. C++11--随机数引擎和随机数分布<random>

    /* 随机数引擎: * 有状态的随机数发生器,生成在预定义的最大小值之间的随机数 * 不是真正的随机数--伪随机 */ int main () { std::default_random_engine ...

  2. PAT 甲级 1006 Sign In and Sign Out (25)(25 分)

    1006 Sign In and Sign Out (25)(25 分) At the beginning of every day, the first person who signs in th ...

  3. python图片和字符串的转换

    有个业务,需要将图片压缩转化为64位编码上传到服务端. import json,requests,base64 #网上下载图片素材 r = requests.get("https://tim ...

  4. lucene索引查看工具luke和文本提取工具Tika

    luke可以方便的查看lucene的索引信息,当然也可以查看solr和es中的索引信息(基于lucene实现). 查看索引前,要注意lucene版本的问题,高版本的lucene用低版本的luke工具就 ...

  5. 使用adb安装遇到的一些坑

    1.下载安装android SDK,可通过浏览器或者相关手机软件下载软件下载需要安装的apk安装文件,把apk文件放到android-sdk-windows\platform-tools下 2.可通过 ...

  6. 第二章:安装zabbix过程

    2.2 安装zabbix过程 2.2.1 安装方式选择 编译安装 (服务较多,环境复杂) yum安装(干净环境) 使用yum 需要镜像yum源 http://www.cnblogs.com/clsn/ ...

  7. PHP微信公众号开发之自动回复

    先把源码类发出来 <?php /** 自己封装 微信 开发api */ header('Content-type: text/html; charset=utf-8');#设置头信息 class ...

  8. CentOS7.4安装部署openstack [Liberty版] (一)

    一.OpenStack简介 OpenStack是一个由NASA(美国国家航空航天局)和Rackspace合作研发并发起的,以Apache许可证授权的自由软件和开放源代码项目. OpenStack是一个 ...

  9. 使用FPM打包工具打rpm包

    使用FPM打包工具打rpm包 一:安装ruby环境和gem命令 fpm 是 ruby写的,因此系统环境需要ruby且版本必须大于1.8.5 # yum -y install ruby rubygems ...

  10. sqlserver表数据的修改

    清除表数据  truncate table  [表名称] 将表b中的一列数据,更新到表tableA  如: tableA .key tableA .value 123   124   tableB.k ...