问题:

当我们修改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自动化添加版本号并修改为参数格式的更多相关文章

  1. 前端静态资源版本更新与缓存之——gulp自动化添加版本号

    公司项目每次发布后,偶尔会有缓存问题,然后看了下gulp,发现gulp还能给js,css自动化添加版本号,可解决缓存的问题,所以自动化实现静态资源的版本更新才是正道.通过网上的资料试过了两种办法: 1 ...

  2. Gulp自动添加版本号(转载)

    本文转载自: gulp自动添加版本号

  3. 前端自动化工具gulp自动添加版本号

    之前,我介绍了学习安装并配置前端自动化工具Gulp,觉得gulp确实比grunt的配置简单很多,于是我决定再深入学习一下gulp,就去网上查了资料,发现gulp还可以自动添加版本号,这个功能就为我平时 ...

  4. gulp批量添加版本号

    要实现的理想效果: "/css/style.css" => "/dist/css/style.css?v=1d87bebe""/js/scrip ...

  5. gulp 自动添加版本号

    本文介绍利用 gulp-rev 和 gulp-rev-collector 进行版本管理 npm官网介绍使用后的效果如下: "/css/style.css" => " ...

  6. Gulp自动添加版本号

    推荐使用gulp-rev + gulp-rev-collector是比较方便的方法,结果如下: "/css/style.css" => "/dist/css/sty ...

  7. gulp自动添加版本号过程中的一些要点记录

    1.打开node_modules\gulp-rev\index.js 第144行 manifest[originalFile] = revisionedFile; 更新为: manifest[orig ...

  8. 使用gulp添加版本号

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

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

    前端自动化打包发布已是一种常态,尤其在移动端,测试过程中静态资源的缓存是件很头疼的事情,有时候明明处理的bug测试还是存在,其实就是缓存惹的祸,手机不比pc浏览器,清理缓存还是有点麻烦的.所以自动化实 ...

随机推荐

  1. 2016蓝桥杯省赛C/C++A组第七题 剪邮票(暴力+并查集)

    题意:有12张连在一起的12生肖的邮票.现在你要从中剪下5张来,要求必须是连着的.(仅仅连接一个角不算相连) 分析:暴力+并查集. 1.记录下每个数字所在位置. 2.先枚举各不相同的5个数的所有可能情 ...

  2. 安装yii2 框架遇到的问题

    1按要求安装好yii2时,访问yii2欢迎页面时,始终提示 CAssetManager.basePath “/assets” is invalid. Please make sure the dire ...

  3. Codeforces 433C #248_div1_A 中位数的应用

    擦..今天这套题好尼玛难啊,做了一个小时,连一题都没做出来,而且还没什么头绪 查了下出题人,师大附中的 14年毕业 13年拿到的国家集训队资格 保送清华 题意是 给一串序列,计算一个值,这个值是 相邻 ...

  4. 吴裕雄--天生自然 PHP开发学习:字符串变量

    <?php $txt="Hello world!"; echo $txt; ?> <?php $txt1="Hello world!"; $t ...

  5. POJ 1547:Clay Bully

    Clay Bully Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 8349   Accepted: 4711 Descri ...

  6. 新iPhone的高售价下,苹果供应商们是该笑还是该哭?

    自新 iPhone发布之日起,世界就从未停止讨论其售价,越来越多的人开始困惑:新 iPhone毫无创新亮点,有什么底气卖到12799RMB呢?整个地球都在期待苹果推出廉价版 iPhone,望眼欲穿地等 ...

  7. Vue编程式路由跳转传递参数

    Vue 有时在路由跳转时需要用到一些原页面里的数据,用以下方法: 1.在跳转页的方法里写下query参数 TableChange(scope){ this.$router.push({ path:'d ...

  8. 2019.3.11 JavaScript课上笔记

    ---恢复内容开始--- 字面值写到左边 var  x= "1"; ++x .x++ // 都有隐式类型转换 x += 1; // 是字符串的拼接 === 判断引用的对象是不是同一 ...

  9. 吴裕雄--天生自然 JAVASCRIPT开发学习:函数参数

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  10. python编程:从入门到实践----第六章>字典

    一.一个简单的字典:alien_0存储外星人的颜色和点数,使用print打印出来 alien_0 = {'color': 'green','points': 5} print(alien_0['col ...