nodejs给html静态资源（css，js）加防缓存时间戳

最新推荐文章于 2024-12-21 20:36:24 发布

原创最新推荐文章于 2024-12-21 20:36:24 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

web前端同时被 3 个专栏收录

39 篇文章

订阅专栏

js代码

22 篇文章

订阅专栏

html5

13 篇文章

订阅专栏

本文介绍了一种使用NodeJS和正则表达式自动更新HTML中CSS和JS文件时间戳的方法，以防止浏览器加载旧缓存，适用于版本迭代。代码示例展示了如何读取文件、替换资源链接并写回更新后的HTML。

在开发的过程中，需要给html的静态资源加上一个随机数，避免版本迭代的时候取本地缓存文件，以下是使用nodejs，正则表达式编写的脚本，可以给css文件，js文件自动加上时间戳，支持已有时间戳二次处理

var fs = require('fs')
var path=require('path');

var filenames = [path.resolve(__dirname+'/test.html')];
// __dirname+'/cloud.html' 为具体的html文件，如果有多个文件，则添加到数组
var _t=+new Date();

filenames.forEach(function(item, index) {
	fs.readFile(item,'utf8',function(err,files){
		var result = files.replace(/href=["'].*\.css.*?["']/g, txt => {
			// 去掉最后一个字符串
			var str = txt.substr(0, txt.length-1);
			var txts = str.split('?');
			return `${txts[0]}?_t=${_t}"`
		});
		result = result.replace(/src=["'].*\.js.*?["']/g, txt => {
			// 去掉最后一个字符串
			var str = txt.substr(0, txt.length-1);
			var txts = str.split('?');
			return `${txts[0]}?_t=${_t}"`
		});

		fs.writeFile(item, result, 'utf8', function (err) {
					if (err) return console.log(err);
		});
	})
});