700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > gulp+自动化编译html gulp自动化构建html静态资源路径版本号添加和替换

gulp+自动化编译html gulp自动化构建html静态资源路径版本号添加和替换

时间:2020-10-08 12:48:18

相关推荐

gulp+自动化编译html gulp自动化构建html静态资源路径版本号添加和替换

gulp

在使用gulp自动添加版本号时稍作一点修改,欢迎指正。

我使用的是(gulp-rev+gulp-rev-collector),但是每次自动化构建都是依赖rev生成的json文件:

"style.css": "style-f048bfa0ab.css",

"script.js": "scrip-5c69cf6d54.js",

利用上面的json去修改html里面的静态路径,第二次如果不想去删除html,只想修改静态资源的路径,文件名被修改无法依赖。

最直接的方法就是修改插件,使rev生成的json文件变为下面的依赖关系:

"style.css": "style.css?v=f048bfa0ab",

"script.js": "scrip.js?v=5c69cf6d54",

这样不会修改文件的名称,依赖关系依然成立。每次输出都能按照最新的依赖关系替换我们html文件的静态资源路径。

1、分别安装gulp-rev、gulp-rev-collerctor

npm install --save-dev gulp-rev

npm install --save-dev gulp-rev-collector

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

第133行 manifest[originalFile] = revisionedFile;

更新为: manifest[originalFile] = originalFile + '?v=' + file.revHash;

3、打开node_modules\gulp-rev\node_modules\rev-path\index.js

10行 return filename + '-' + hash + ext;

更新为: return filename + ext;

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

31行 if ( path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' ) !== path.basename(key) ) {

更新为: if ( path.basename(json[key]).split('?')[0] !== path.basename(key) ) {

Tips:这三个文件的路径不是绝对的,比如rev-path这个文件夹也可能直接在node_modules\rev-path

修改之后再构建就能达到开始提到的效果了。

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