gulp 添加版本号 解决浏览器缓存问题

分别安装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

1.打开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;

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

     第144行 manifest[originalFile] = revisionedFile;
    更新为: manifest[originalFile] = originalFile + ‘?v=‘ + file.revHash;

3.打开nodemodules\gulp-rev\nodemodules\rev-path\index.js

    10行 return filename + ‘-‘ + hash + ext;
    更新为: return filename + ext;

4.打开node_modules\gulp-rev-collector\index.js

    41行 if ( path.basename(json[key]).replace(new RegExp( opts.revSuffix ), ‘‘ ) !== path.basename(key) ) {
    更新为: if ( path.basename(json[key]).split(‘?‘)[0] !== path.basename(key) ) {

5.打开node_modules\gulp-rev-collector\index.js
    第107行 regexp: new RegExp( ‘([\/\\\\\‘"])‘ + pattern, ‘g‘ ),
    或者第160行 regexp: new RegExp( prefixDelim + pattern, ‘g‘ ),
    更新为: regexp: new RegExp( ‘([\/\\\\\‘"])‘ + pattern+‘(\\?v=\\w{10})?‘, ‘g‘ ),

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

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

时间: 2024-10-17 07:03:27

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

Maven构造版本号的方法解决浏览器缓存问题

需要解决的问题 在做WEB系统开发时,为了提高性能会利用浏览器的缓存功能,其实即使不显式的申明缓存,现代的浏览器都会对静态文件(js.css.图片之类)缓存.但也正因为这个问题导致一个问题,就是资源的缓存逻辑有时出现问题后服务器的最新版本文件无法更新客户端的缓存. 这个问题会给用户产生许多的困扰,当然首先是测试人员会很头痛,一些看起来没有修复的bug为什么开发要说做好了?这种时候我会无奈的说:ctrl+f5刷新一下.但这毕竟不是解决问题的方法. 思路与方法考虑 思路 之前没有着手处理过这样的问题

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

需要解决的问题 在做WEB系统开发时,为了提高性能会利用浏览器的缓存功能,其实即使不显式的申明缓存,现代的浏览器都会对静态文件(js.css.图片之类)缓存.但也正因为这个问题导致一个问题,就是资源的缓存逻辑有时出现问题后服务器的最新版本文件无法更新客户端的缓存. 这个问题会给用户产生许多的困扰,当然首先是测试人员会很头痛,一些看起来没有修复的bug为什么开发要说做好了?这种时候我会无奈的说:ctrl+f5刷新一下.但这毕竟不是解决问题的方法. 思路与方法考虑 思路 之前没有着手处理过这样的问题

使用时间戳解决浏览器缓存问题

在IE或者其他的很多浏览器中,如果你每次请求的地址是相同的,浏览器就不会去连接服务器而是去读取缓存,这样对于很多应用来时是非常好的,可以降低服务器的压力或者减少带宽的使用,但是对于ajax应用,很多都是必须保持时时的连接与服务器进行交互,所以需要使用一个小技巧,时间戳来使每次的请求地址都不同,从而跳过浏览器的缓存 机制实现每次的请求服务器,这样的功能在图片验证码的时候也是比较常用的一种方法. 时间戳参数是不会被后台程序接受的,只是为了保证是新的URl避免浏览器读缓存

解决浏览器缓存css与js的办法

参考 1:http://ju.outofmemory.cn/entry/2633 2:http://www.ibm.com/developerworks/cn/web/1401_luyf_reducejs/

java解决浏览器缓存问题

对html页面和jsp最好都加一些设置对于HTM网页,加入: <meta HTTP-EQUIV="pragma" CONTENT="no-cache"> <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"> <meta HTTP-EQUIV="expires" CONTENT="0&

利用gulp解决微信浏览器缓存问题

做了好多项目,这次终于要解决微信浏览器缓存这个令人头疼的问题了.每次上传新的文件,在微信浏览器中访问时,总要先清除微信的缓存,实在麻烦,在网上搜罗了很多解决办法,终于找到了方法:利用gulp解决缓存问题.关于gulp大家可以去gulp官网去详细了解. 这篇文章主要参考于Gulp解决发布线上文件(CSS和JS)缓存问题和Gulp.js----比Grunt更易用的前端构建工具两篇文章,在这里先谢过原作者. 本文主要记录安装gulp以及使用.解决缓存问题的过程,以便日后方便查阅. 1.安装NodeJS

gulp自动化打包及静态文件自动添加版本号

前端自动化打包发布已是一种常态,尤其在移动端,测试过程中静态资源的缓存是件很头疼的事情,有时候明明处理的bug测试还是存在,其实就是缓存惹的祸,手机不比pc浏览器,清理缓存还是有点麻烦的.所以自动化实现静态资源的版本更新才是正道. 实际开发过程中,我们常用到的功能包括: 1.目标路径的清除: 2.静态资源复制到目标路径: 3.css文件的合并与压缩: 4.js文件的合并与压缩: 5.根据文件的变化添加版本号: 第1.2.3.4几个功能倒是很好解决,今天主要说说gulp实现静态资源自动添加版本号:

通过gulp为requireJs引入的模块添加版本号

由于项目用到requireJs,并且通过gulp来对项目进行统一的管理,为了防止浏览器对文件进行缓存,所以通过gulp为项目中的文件添加版本号. 1.分别安装gulp-rev.gulp-rev-collerctor npm install --save-dev gulp-rev npm install --save-dev gulp-rev-collector 打包后的效果 "/css/style.css" => "/dist/css/style-1d87bebe.cs

解决修改css或js文件,浏览器缓存更新问题。

在搜索引擎中搜索关键字.htaccess 缓存,你可以搜索到很多关于设置网站文件缓存的教程,通过设置可以将css.js等不太经常更新的文件缓存在浏览器端,这样访客每次访问你的网站的时候,浏览器就可以从浏览器的缓存中获取css.js等,而不必从你的服务器读取,这样在一定程度上加快了网站的打开速度,又可以节约一下你的服务器流量. 问题 现在问题来了,.htaccess设置的css.js缓存都有一个过期时间,如果在访客的浏览器中已经缓存了css.js,在这些css.js缓存未过期之前,浏览器只会从缓存