700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > gulp自动化添加版本号并修改为参数格式

gulp自动化添加版本号并修改为参数格式

时间:2023-08-25 12:24:28

相关推荐

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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。