使用gulp添加版本号
由于js和css的缓存问题,所以,希望在html上给js和css添加上版本号。
常见的用法是使用gulp-rev和gulp-rev-collector进行操作。使用这两个插件,得到的效果如下图所示:
但是,我们希望的格式是这种:
有大神给出了解决办法,参见如下链接:
此篇文章中的修改行数,会随着插件的更新而发生变化,大家可以搜索一下,基本上就是了。
可是随后又出现一个问题,如果重复执行添加版本号的操作,版本号会重复追加到链接后面:
<link rel="stylesheet" type="text/css" href="./css/main.v2.css?v=5e925faf8e?v=5e925faf8e" />
于是,顺着上面作者的思路,我去修改了gulp-rev-collector的源码,修改的目录是:
修改了两处代码:
第一处:修改了函数 escPathPattern,代码修改为:
function escPathPattern(pattern) {
var rp = pattern.replace(/[\-\[\]\{\}\(\)\*\+\?\.\^\$\|\/\\]/g, "\\$&");
rp = pattern + "(\\?v=(\\d|[a-z]){8,10})*";
return rp;
}
第二处:修改了函数revCollector中的for(var key in manifest)下面的第一个条件判断,代码如下:
if (opts.replaceReved) {
patterns.push( escPathPattern( (path.dirname(key) === '.' ? '' : closeDirBySep(path.dirname(key)) ) + path.basename(key, path.extname(key)) )
+ opts.revSuffix
+ escPathPattern( path.extname(key) ) + "(\\?v=(\\d|[a-z]){8,10})*"
);
}
保存之后,就可以得到想要的结果了。下面附上我的gulpfile.js部分代码:
gulp.task("css", function(){
return gulp.src(["./**/*.css","./js/**/*.css"])
.pipe(rev())
.pipe(gulp.dest("./dist/css/"))
.pipe(rev.manifest())
.pipe(gulp.dest("./dist/css/"));
});
gulp.task("js", function(){
return gulp.src(["./**/*.js"])
.pipe(rev())
.pipe(gulp.dest("./dist/js/"))
.pipe(rev.manifest())
.pipe(gulp.dest("./dist/js/"));
});
//v2下面全部的aspx添加版本号
gulp.task("rev",function(){
return gulp.src(['./dist/**/*.json', "./*.aspx"])
.pipe(
revCollector({
replaceReved: true,
dirReplacements: { }
}))
.pipe(gulp.dest("./"));
});
我们公司的开发环境是vs,在用gulp修改版本的时候,会发生乱码的情况,经过对编码方式的查看发现,原本是utf-8有签名的编码,添加完版本号之后,变成了utf-8无签名的编码方式,经过一番查看,找到了解决办法,如下:
修改代码:
全局搜索mutables.forEach(,将其代码修改为:
mutables.forEach(function (file) {
if (!file.isNull()) {
var src = file.contents.toString('utf8');
changes.forEach(function (r) {
src = src.replace(r.regexp, r.replacement);
});
//src = "EF BB BF" + src;
var content = new Buffer(src, "utf8");
//加一步判断操作,判断是否是带bom的文件
var bomTag = ["239", "187", "191"];
if(!(content[0].toString(16).toLowerCase() == "ef" && content[1].toString(16).toLowerCase()=="bb" && content[3].toString(16).toLowerCase()=="bf")){
content = Buffer.concat([new Buffer(bomTag), content], content.length + 3);
}
file.contents = content;
}
this.push(file);
}, this);
修改里面的逻辑为,先判断文件头部是否带有“EF BB BF”(BOM标识),如果没有,则追加到文件头部。
使用gulp添加版本号的更多相关文章
- gulp 添加版本号 解决浏览器缓存问题
分别安装gulp-rev.gulp-rev-collerctor.gulp-asset-rev,安装了的略过 npm install gulp-rev --save-dev npm install g ...
- 前端自动化工具gulp自动添加版本号
之前,我介绍了学习安装并配置前端自动化工具Gulp,觉得gulp确实比grunt的配置简单很多,于是我决定再深入学习一下gulp,就去网上查了资料,发现gulp还可以自动添加版本号,这个功能就为我平时 ...
- Gulp自动添加版本号(转载)
本文转载自: gulp自动添加版本号
- 前端静态资源版本更新与缓存之——gulp自动化添加版本号
公司项目每次发布后,偶尔会有缓存问题,然后看了下gulp,发现gulp还能给js,css自动化添加版本号,可解决缓存的问题,所以自动化实现静态资源的版本更新才是正道.通过网上的资料试过了两种办法: 1 ...
- 通过gulp为requireJs引入的模块添加版本号
由于项目用到requireJs,并且通过gulp来对项目进行统一的管理,为了防止浏览器对文件进行缓存,所以通过gulp为项目中的文件添加版本号. 1.分别安装gulp-rev.gulp-rev-col ...
- gulp自动化打包及静态文件自动添加版本号
前端自动化打包发布已是一种常态,尤其在移动端,测试过程中静态资源的缓存是件很头疼的事情,有时候明明处理的bug测试还是存在,其实就是缓存惹的祸,手机不比pc浏览器,清理缓存还是有点麻烦的.所以自动化实 ...
- 前端构建工具 Gulp 压缩合并JS/CSS 并添加版本号、ES6转ES5
Gulp 基于 Node.js 的前端构建工具,可以实现前端代码的编译(sass.less).压缩合并(JS.CSS).测试:图片的压缩:已经添加 JS 和 CSS 版本号,防止浏览器缓存. 1. 安 ...
- gulp自动化添加版本号并修改为参数格式
问题: 当我们修改js和css文件时往往需要清除浏览器的缓存,否则有些效果就看不到更新过后的. 通过对js,css文件内容进行hash运算,生成一个文件的唯一hash字符串(如果文件修改则hash号会 ...
- gulp配置版本号 教程之gulp-rev-append
简介: 使用gulp-rev-append给页面的引用添加版本号,清除页面引用缓存. 1.安装nodejs/全局安装gulp/项目安装gulp/创建package.json和gulpfile.js文件 ...
随机推荐
- 邮箱验证 各种邮箱的smtp
常见邮箱的SMTP设置 QQ 邮箱举例:(地址test@qq.com)(账号test)(密码***)(SMTP服务smtp.qq.com)(端口25)(注意:请手动开通SMTP功能,通过网页登录qq邮 ...
- cf 733f
给你很多条边,每条边有一个初始边权w1,然后还有一个值表示把这个边权减一的代价w2,然后给你一个预算budget,然后让你输出怎么选边之后构成的树的边权和最小(在用budget减少了边权之后),输出你 ...
- linux中用户、组的管理(密码管理、权限管理及其修改用户、组)(转)
process(进程) 1 计算资源 权限 用户(获取资源或服务的凭证或标识) 用户,容器,关联权限:用户组(标识符),方便地指派权限 2 用户.组.权限 安全上下文(secure context ...
- target="_blank"
target="_blank":出现在<a target="_blank" href="http://">中,在开发中,在一个系 ...
- R语言画全基因组关联分析中的曼哈顿图(manhattan plot)
1.在linux中安装好R 2.准备好画曼哈顿图的R脚本即manhattan.r,manhattan.r内容如下: #!/usr/bin/Rscript #example : Rscript plot ...
- 利用SlidingPaneLayout实现侧滑
利用SlidingPaneLayout实验仿QQ侧滑效果 1.效果图 2.布局文件 <?xml version="1.0" encoding=" ...
- iOS9系统分享失败问题解决
因为iOS9系统需要设置打开QQ和微信的白名单,如果出现无法分享或者直接提示分享失败,试一下在infoPlist中添加以下白名单 http://wiki.mob.com/ios9-对sharesdk的 ...
- c语言插入排序
对于小规模输入,插入排序是一种非常快速的排序算法,且原理简单,结构紧凑. 插入排序的原理:从序列中第二个数A开始,将A,插入前面已经排好的序列中,形成一个新的排序好的序列,以此类推到最后一个元素. 参 ...
- Java 项目优化实战
https://blog.coding.net/blog/java-coding-performance 1 Visual VM 2 优化一 2.1 背景 2.2 原实现 2.3 剖析 2.4 方案 ...
- python迭代器和生成器
迭代器 #可以被netxt()函数调用不断返回一个值的对象成为迭代器:Iterator #迭代器是访问集合元素的一种方式,从集合第一个元素开始(用next()方法)访问就不能回退,便于循环遍历一些较大 ...