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

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

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

浅谈gulp的使用、gulp的常用插件、gulp基本操作以及gulp的常用项目流程操作
写在前面: 因为gulp是一个基于node的工具,所以我们需要先安装node,具体可见[node的安装及配置] 目录一.gulp简介二.gulp基本使用 1. 创建项目 2. gulp的安装 3. ...
运维实践-最新Nginx二进制构建编译lua-nginx-module动态链接Lua脚本访问Redis数据库读取静态资源隐式展现...
关注「WeiyiGeek」公众号设为「特别关注」每天带你玩转网络安全运维.应用开发.物联网IOT学习! 本章目录: 0x0n 前言简述知识引入 Lua模块指令阶段 0x01 部署环境安装说明安 ...
js修改地址栏url_在gulp、create-react-app中css，js中的文件路径
我们的项目HTML文件单独放在一个服务器上,静态资源js.css.images放在我们的静态资源服务器上,这样部署后会出现一个问题,css文件中的图片相对路径,在html的服务器上就会变成 //htm ...
前后端分离+本地服务实时刷新+缓存管理+接口proxy+静态资源增量更新+各种性能优化+上线运维发布——gulp工作流搭建...
技巧集:http://www.gulpjs.com.cn/docs/recipes/ 其实无非就是利用各种gulp插件.node脚本对项目文件做各种IO操作,只是备忘,需要的话,还是自己重新写最合适. ...
msbuild构建时用SVN修改版本号代替AssemblyVersion的Revision版本号
持续构建需要标识出每次构建的版本,而每次构建的时候人工去修改版本是不现实的.靠程序去添加版本号,有3种可选:1) 顺序流水号:2) 时间戳:3) SVN检出代码的修订版本号 1) 顺序流水号.需要每次 ...
使用gulp+browser-sync搭建Sass自动化编译以及自动刷新所需要的插件
使用gulp+browser-sync搭建Sass自动化编译以及自动刷新所需要的插件按照gulp需求插件安装browser-sync(在命令行中输入) npm install --save-dev ...
Gulp的自动化编译PostCss
Gulp能够自动执行task定义的事务,但是我们每次调用一次事务,事务也就执行一次,这样我们每次都必须手动去执行一次,就显得很繁琐. 以移动app开发为例,我们在编写app的css时,诸如px的转化问 ...
java 自动化编译_构建Jenkins自动化编译管理环境
今天研究了一下Jenkins,有了一个粗浅的认识,顺手把构建的过程说一下,后续慢慢补充: (1)Secure CRT 连接到Linux服务器要注意的一点是,要搞好一个文件传输的路子,否则不好传东西. ...
gulp自动化环境搭建，自动化解决方案
安装gulp 深入设置任务之前,需先安装gulp: $ npm install gulp -g 这会将gulp安装到全域环境下,让你可以存取gulp的CLI.接著,需要在本地端的专案进行安装.cd到你 ...

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

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

最新文章

热门文章