nodejs原生模块写一个文件（js、css）变化自动修改版本号模块

最新推荐文章于 2023-03-14 15:00:45 发布

weixin_34025151

最新推荐文章于 2023-03-14 15:00:45 发布

阅读量426

点赞数

原文链接：https://my.oschina.net/tbd/blog/988724

版权

为什么80%的码农都做不了架构师？>>>

测试：我们初始化结构

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js文件变化自动加版本号</title>
<link rel="stylesheet" href="css/c1.css?v=000000" />
<link rel="stylesheet" href="css/c2.css?v=000000" />
<link rel="stylesheet" href="css/c3.css?v=000000" />
<script type="text/javascript" src="js/a.js?v=000000"></script>
<script type="text/javascript" src="js/b.js?v=000000"></script>
<script type="text/javascript" src="js/c.js?v=000000"></script>
<script type="text/javascript" src="js/d.js?v=000000"></script>
<script type="text/javascript" src="js/e.js?v=000000"></script>
</head>

<body>
<h3>js文件变化自动加版本号</h3>
</body>
</html>

第一次执行：所有引入全部设置对应的hash，并且生成一个old.js文件

测试：修改b.js和c2.css

对比

我们的版本号是不是只是修改了b.js和c2.css

测试：不修改直接执行

其他：对于不加 ?v=xxx 的我们不会做任何处理

模块书写和源码：

我们的项目目录：

首先我们有一个index.html，他的代码是这样的：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js文件变化自动加版本号</title>
<link rel="stylesheet" href="css/c1.css?v=000000" />
<link rel="stylesheet" href="css/c2.css?v=000000" />
<link rel="stylesheet" href="css/c3.css?v=000000" />
<script type="text/javascript" src="js/a.js?v=000000"></script>
<script type="text/javascript" src="js/b.js?v=000000"></script>
<script type="text/javascript" src="js/c.js?v=000000"></script>
<script type="text/javascript" src="js/d.js?v=000000"></script>
<script type="text/javascript" src="js/e.js?v=000000"></script>
</head>

<body>
<h3>js文件变化自动加版本号</h3>
</body>
</html>

可以看出，这里面我们引入了css和js文件夹下的css和js文件，我们初次引入，对于变化修改版本号的文件必须如上设置，对于不修改版本号的正常设置即可！

然后是我们的启动js文件updateVersion.js:

/*
	author     dgx
*/
var fs = require('fs');
var crypto = require('crypto');
//有?的路径
var allcss=[],alljs=[],shortallcss=[],shortalljs=[];
//hash 
var realallcss=[],realalljs=[];
//真实路径
var realshortallcss=[],realshortalljs=[];
changenum=0;
//code
fs.readFile('./index.html','utf8',function(err, data0){
	if (err) throw err;
	//获取所有版本号相关css
	var ccss="\.css\\?v=.*\"";
	var regcss= new RegExp(ccss,"g");
	allcss=data0.match(regcss);
	//获取所有没有版本号相关css
	var shortccss="href=\".*\.css\\?v=";
	var shortregcss= new RegExp(shortccss,"g");
	shortallcss=data0.match(shortregcss);
	//获取所有版本号相关js
	var cjs="\.js\\?v=.*\"";
	var regjs= new RegExp(cjs,"g");
	alljs=data0.match(regjs);
	//获取所有没有版本号相关js
	var shortcjs="src=\".*\.js\\?v=";
	var shortregjs= new RegExp(shortcjs,"g");
	shortalljs=data0.match(shortregjs);
	//去掉引号
	
	for(var i=0;i<allcss.length;i++){
		realallcss[i]=allcss[i].substr(7,allcss[i].length-8)
	};
	for(var i=0;i<shortallcss.length;i++){
		realshortallcss[i]=shortallcss[i].substr(6,shortallcss[i].length-9)
	};
	for(var i=0;i<alljs.length;i++){
		realalljs[i]=alljs[i].substr(6,alljs[i].length-7)
	};
	for(var i=0;i<shortalljs.length;i++){
		realshortalljs[i]=shortalljs[i].substr(5,shortalljs[i].length-8)
	};
	//hash 设置版本号
	var is=fs.existsSync("./old.js");
	if(is){//正常
		for(var i=0;i<realshortallcss.length;i++){
			var md5sum = crypto.createHash('md5');
			var str=fs.readFileSync("./"+realshortallcss[i],'utf8');
	　 	　	md5sum.update(str);
	　　		str = md5sum.digest('hex');
			if(str!=realallcss[i]){
				var c="\""+realshortallcss[i]+"\\?v=.*\"";
				var reg= new RegExp(c,"g");
				data0=data0.replace(reg,"\""+realshortallcss[i]+"?v="+str+"\"");	
				console.log("发生变化文件："+realshortallcss[i]);
				changenum+=1;
			}else{
				
			};
			
		
		};
		for(var i=0;i<realshortalljs.length;i++){
			var md5sum = crypto.createHash('md5');
			var str=fs.readFileSync("./"+realshortalljs[i],'utf8');
	　 	　	md5sum.update(str);
	　　		str = md5sum.digest('hex');
			if(str!=realalljs[i]){
				var c="\""+realshortalljs[i]+"\\?v=.*\"";
				var reg= new RegExp(c,"g");
				data0=data0.replace(reg,"\""+realshortalljs[i]+"?v="+str+"\"");	
				console.log("发生变化文件："+realshortalljs[i]);
				changenum+=1;
			}else{
			
			};
			
		};
		//写入到index.js
		if(changenum!=0){
			fs.writeFile("./index.html",data0,function(err){
				if (err) throw err;
				console.log("处理成功！");
				console.log("变化文件个数："+changenum);
				
			});
		}else{
			console.log("没有变化文件！");
		};
		
	}else{//首次
		for(var i=0;i<realshortallcss.length;i++){
			var md5sum = crypto.createHash('md5');
			var str=fs.readFileSync("./"+realshortallcss[i],'utf8');
	　 	　	md5sum.update(str);
	　　		str = md5sum.digest('hex');
	
			var c="\""+realshortallcss[i]+"\\?v=.*\"";
			var reg= new RegExp(c,"g");
			data0=data0.replace(reg,"\""+realshortallcss[i]+"?v="+str+"\"");	
			console.log("发生变化文件："+realshortallcss[i]);
			changenum+=1;
		
		};
		for(var i=0;i<realshortalljs.length;i++){
			var md5sum = crypto.createHash('md5');
			var str=fs.readFileSync("./"+realshortalljs[i],'utf8');
	　 	　	md5sum.update(str);
	　　		str = md5sum.digest('hex');
	
			var c="\""+realshortalljs[i]+"\\?v=.*\"";
			var reg= new RegExp(c,"g");
			data0=data0.replace(reg,"\""+realshortalljs[i]+"?v="+str+"\"");	
			console.log("发生变化文件："+realshortalljs[i]);
			changenum+=1;
		};
		//写入到index.js
		if(changenum!=0){
			fs.writeFile("./index.html",data0,function(err){
				if (err) throw err;
				console.log("第一次处理！");
				fs.writeFile("old.js","我写入了",function(err){
					if (err) throw err;
					console.log("第一次处理生成！old.js");
				});
				
			});
		}else{
			console.log("没有变化文件！");
		};
	};
	
});

我们分析我们的代码，非常简单，就是会找index.html的带有 ?v=xxx 的引入文件（css，js）

在第一次执行我们会生成文件hash，把v=后面的设置内容改为对应的hash值，并且生成一个old.js，

以后执行就会先看有没有old.js，有的话也就是非第一次执行机会判断哪个文件修改了，然后重设新的hash做版本号。

执行(前提你安装了node环境)：

切换到index的目录，运行