gulp自动化添加版本号并修改为参数格式
问题:
当我们修改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>
gulp自动化添加版本号并修改为参数格式的更多相关文章
- 前端静态资源版本更新与缓存之——gulp自动化添加版本号
公司项目每次发布后,偶尔会有缓存问题,然后看了下gulp,发现gulp还能给js,css自动化添加版本号,可解决缓存的问题,所以自动化实现静态资源的版本更新才是正道.通过网上的资料试过了两种办法: 1 ...
- Gulp自动添加版本号(转载)
本文转载自: gulp自动添加版本号
- 前端自动化工具gulp自动添加版本号
之前,我介绍了学习安装并配置前端自动化工具Gulp,觉得gulp确实比grunt的配置简单很多,于是我决定再深入学习一下gulp,就去网上查了资料,发现gulp还可以自动添加版本号,这个功能就为我平时 ...
- gulp批量添加版本号
要实现的理想效果: "/css/style.css" => "/dist/css/style.css?v=1d87bebe""/js/scrip ...
- gulp 自动添加版本号
本文介绍利用 gulp-rev 和 gulp-rev-collector 进行版本管理 npm官网介绍使用后的效果如下: "/css/style.css" => " ...
- Gulp自动添加版本号
推荐使用gulp-rev + gulp-rev-collector是比较方便的方法,结果如下: "/css/style.css" => "/dist/css/sty ...
- gulp自动添加版本号过程中的一些要点记录
1.打开node_modules\gulp-rev\index.js 第144行 manifest[originalFile] = revisionedFile; 更新为: manifest[orig ...
- 使用gulp添加版本号
由于js和css的缓存问题,所以,希望在html上给js和css添加上版本号. 常见的用法是使用gulp-rev和gulp-rev-collector进行操作.使用这两个插件,得到的效果如下图所示: ...
- gulp自动化打包及静态文件自动添加版本号
前端自动化打包发布已是一种常态,尤其在移动端,测试过程中静态资源的缓存是件很头疼的事情,有时候明明处理的bug测试还是存在,其实就是缓存惹的祸,手机不比pc浏览器,清理缓存还是有点麻烦的.所以自动化实 ...
随机推荐
- 2016蓝桥杯省赛C/C++A组第七题 剪邮票(暴力+并查集)
题意:有12张连在一起的12生肖的邮票.现在你要从中剪下5张来,要求必须是连着的.(仅仅连接一个角不算相连) 分析:暴力+并查集. 1.记录下每个数字所在位置. 2.先枚举各不相同的5个数的所有可能情 ...
- 安装yii2 框架遇到的问题
1按要求安装好yii2时,访问yii2欢迎页面时,始终提示 CAssetManager.basePath “/assets” is invalid. Please make sure the dire ...
- Codeforces 433C #248_div1_A 中位数的应用
擦..今天这套题好尼玛难啊,做了一个小时,连一题都没做出来,而且还没什么头绪 查了下出题人,师大附中的 14年毕业 13年拿到的国家集训队资格 保送清华 题意是 给一串序列,计算一个值,这个值是 相邻 ...
- 吴裕雄--天生自然 PHP开发学习:字符串变量
<?php $txt="Hello world!"; echo $txt; ?> <?php $txt1="Hello world!"; $t ...
- POJ 1547:Clay Bully
Clay Bully Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 8349 Accepted: 4711 Descri ...
- 新iPhone的高售价下,苹果供应商们是该笑还是该哭?
自新 iPhone发布之日起,世界就从未停止讨论其售价,越来越多的人开始困惑:新 iPhone毫无创新亮点,有什么底气卖到12799RMB呢?整个地球都在期待苹果推出廉价版 iPhone,望眼欲穿地等 ...
- Vue编程式路由跳转传递参数
Vue 有时在路由跳转时需要用到一些原页面里的数据,用以下方法: 1.在跳转页的方法里写下query参数 TableChange(scope){ this.$router.push({ path:'d ...
- 2019.3.11 JavaScript课上笔记
---恢复内容开始--- 字面值写到左边 var x= "1"; ++x .x++ // 都有隐式类型转换 x += 1; // 是字符串的拼接 === 判断引用的对象是不是同一 ...
- 吴裕雄--天生自然 JAVASCRIPT开发学习:函数参数
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- python编程:从入门到实践----第六章>字典
一.一个简单的字典:alien_0存储外星人的颜色和点数,使用print打印出来 alien_0 = {'color': 'green','points': 5} print(alien_0['col ...