jemeter參數化,gulp自動化添加版本號并修改為參數格式

 2023-10-18 阅读 28 评论 0

摘要:問題: 當我們修改js和css文件時往往需要清除瀏覽器的緩存,否則有些效果就看不到更新過后的。 通過對js,css文件內容進行hash運算,生成一個文件的唯一hash字符串(如果文件修改則hash號會發生變化) 替換html中的js,css文件名,生成一個帶版本號的文件

問題:

當我們修改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>

轉載于:https://www.cnblogs.com/diyxiaoshitou/p/9022105.html

版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。

原文链接:https://hbdhgg.com/4/146008.html

发表评论:

本站为非赢利网站,部分文章来源或改编自互联网及其他公众平台,主要目的在于分享信息,版权归原作者所有,内容仅供读者参考,如有侵权请联系我们删除!

Copyright © 2022 匯編語言學習筆記 Inc. 保留所有权利。

底部版权信息