使用gulp工具自动给css和js批量添加版本号以解决缓存

网站开发时,CSS或JS文件修改后,阅读器缓存会导致页面无法实时更新。文章介绍了通过JS添加版本号、JSP页面用Java代码生成时间戳等方法解决缓存问题,还详细说明了使用gulp工具自动添加CSS版本号的步骤及插件配置修改。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

网站开发时,每次css或js文件修改后,阅读器因有缓存而没法实时的出现最新的页面内容,很可能导致页面混乱。

处理办法:

方法一:可以通过js自动给html添加版本号

document.write(“href=’/css/layout.css?v=”+new Date().getTime()+"’>");

方法二:若是jsp页面,可以使用java代码生成时间戳(若是jsp页面用方法一也行,但此方法更方便)

方法三:使用其他的方法添加版本号,如用node.js自动配置等

ps:我们清除缓存的目的是为了及时看到页面的更新情况,当我们将页面上线时(即部署到正式环境,不会再做更改),建议把版本号固定,因为有缓存的页面访问更快,需要更新的时候再更换下固定版本号。

可以用gulp给html引入的css,js文件批量添加版本号

这里介绍采用gulp工具自动添加CSS版本号的方法,添加完后的效果

1、安装gulp和gulp插件
已安装node和npm包环境下
初始化项目
npm init
安装gulp
npm install --save-dev gulp // v3.9.1 安装插件
npm install --save-dev gulp-rev
// v8.1.1 版本号生成插件npm install --save-dev gulp-rev-collector
// v1.3.1 替换版本号路径插件npm install --save-dev run-sequence
// v2.2.1 同步执行任务
2、项目根目录下创建gulpfile.js文件
//引入gulp和gulp插件var gulp = require(‘gulp’),
rev = require(‘gulp-rev’),
revCollector = require(‘gulp-rev-collector’),
runSequence = require(‘run-sequence’);

//CSS文件生成版本号(hash编码),并将所有带有版本号的文件放入
rev-manifest.json中gulp.task(‘revCss’, function(){
//gulp.task–定义一个gulp任务;revCSS–定义该任务的名称,起任何名称都可以
return gulp.src(‘css/.css’) //gulp.src–要操作的源文件路径
.pipe(rev()) //定义一个流,将所有匹配到的文件名全部生成相应的版本号
.pipe(rev.manifest()) //把所有生成的带版本号的文件名保存到json文件中
//把json文件保存到指定的路径,即src下面的css文件,没有该文件,会自动创建});
.pipe(gulp.dest(‘rev/css’));
//CSS文件生成版本号,并将所有带有版本号的文件放入json中
gulp.task(‘revJs’, function(){ return gulp.src('js/
.js’)
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest(‘rev/js’));
});
//将html文件中的css,js文件引入路径全部替换成带有版本号的
gulp.task(‘revHtml’, function () { return gulp.src([‘rev/**/.json’, './.html’])
//gulp.src–第一个参数:生成的json文件的路径,
//我这里将所有的json文件,js和css,都选中;第二个参数:要替换css,js文件(路径)的HTML文件
.pipe(revCollector())
.pipe(gulp.dest(’./’));
//html更换css,js文件版本,更改完成之后保存的地址
});
//开发构建
gulp.task(‘default’, function (done) {
condition = false;
//需要说明的是,用gulp.run也可以实现以上所有任务的执行,只是gulp.run是最大限度的并行执行
//这些任务,而在添加版本号时需要串行执行(顺序执行)这些任务,故使用了runSequence.
runSequence(
[‘revCss’],
[‘revJs’],
[‘revHtml’],
done);
});
3、修改插件配置,因插件版本更新,更改的行数可能会略有差异
1、路径 node_modules/gulp-rev/index.js
第135行 manifest[originalFile] = revisionedFile;
更改为 manifest[originalFile] = originalFile + ‘?v=’ + file.revHash;
2、路径 node_modules/gulp-rev-collector/index.js
第40行 var cleanReplacement=path.basename(json[key]).replace(new RegExp( opts.revSuffix ),’’ );
更改为 var cleanReplacement=path.basename(json[key]).split(’?’)[0];
第173行 regexp: new RegExp( prefixDelim + pattern, ‘g’ ),
更改为 regexp: new RegExp( prefixDelim + pattern+’(?v=w{10})?’, ‘g’ ),
3、路径 node_modules/rev-path/index.js
第9行 return modifyFilename(pth, (filename, ext) => ${filename}-${hash}${ext});
更改为 return modifyFilename(pth, (filename, ext) => ${filename}${ext});
运行gulp

目录结构

tips:若不修改插件的配置,生成的效果会是如下:

执行gulp命令后的效果

这不是我们需要的效果

3.更改gulp-rev和gulp-rev-collector

打开node_modulesgulp-revindex.js
第144行 manifest[originalFile] = revisionedFile;
更新为: manifest[originalFile] = originalFile + ‘?v=’ + file.revHash;
打开nodemodulesgulp-rev
odemodules
ev-pathindex.js
10行 return filename + ‘-’ + hash + ext;
更新为: return filename + ext;

打开node_modulesgulp-rev-collectorindex.js
31行if ( !.isString(json[key]) || path.basename(json[key]).replace
(new RegExp( opts.revSuffix ), ‘’ ) !== path.basename(key) ) {
更新为: if ( !
.isString(json[key]) || path.basename(json[key]).split(’?’)[0]
!== path.basename(key) ) {
再执行gulp命令,得到的结果如下(效果正确):

但是假如我们更改了css和js后,再执行gulp命令,得到的结果会如下:

有没有发现,会在版本号后面再添加一个版本号,因为gulp只替换了原来文件名,这样又不符合预期效果了,所以我们想到,还需要修改插件的替换正则表达式。

4.继续更改gulp-rev-collector

打开node_modulesgulp-rev-collectorindex.js
第107行 regexp: new RegExp( ‘([/’"])’ + pattern, ‘g’ ),
更新为: regexp: new RegExp( ‘([/’"])’ + pattern+’(?v=w{10})?’, ‘g’ ),
现在你不管执行多少遍gulp命令,得到的html效果都是

附上改过后的node_modules文件

node_modules.rar


原文出处:[ 2KB.COM ]
原文地址:http://www.2kb.com/news/txtlist_i4820v.html
版权声明:转载请附上原文链接!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值