用python写的简单的前端js代码合并方法

用python写的简单的前端js代码合并方法,直接上源码:

from bs4 import BeautifulSoup
import os
import shutil

#让使用者输入需要执行的目录
exeDir = input('请输入执行目录',)
#切换到执行目录
os.chdir(exeDir)
#拼接需要输出的目录,这里不同系统需要更改一下
outDir = 'E:\\release' + os.sep + exeDir.split(os.sep)[-1]

#判断根目录是否存在,存在则清空
if(os.path.exists(outDir)):
	shutil.rmtree(outDir)
#判断根目录是否存在,存在则清空
os.mkdir(outDir)

#合并后的js文件目录,并创建该目录
mergeJsDir = 'mergeJs' + os.sep;
mergeJsBaseDir = outDir + os.sep + mergeJsDir;
os.mkdir(mergeJsBaseDir)
#需要合并的js序列
noMergeJs = ['comitem','comEnd'];
#合并文件函数
def mergeJs(fileList):
	fileListStr = '_'.join([os.path.splitext(os.path.split(i)[1])[0] for i in fileList]) + '.js';
	mergeJsFile = mergeJsBaseDir + fileListStr;
	with open(mergeJsFile, 'w', buffering=163840, encoding='utf8') as cJs:
		for fileName in filelist:
			with open(fileName, 'r', buffering=163840, encoding='utf8') as jsItem:
				cJs.write(jsItem.read()+'\n')
	return '<script src="'+ mergeJsDir + fileListStr+'"></script>';

#主文件
#盛放需要合并js的列表
for fileItem in os.listdir():
	if(os.path.isfile(fileItem)):
		if(os.path.splitext(fileItem)[1] == '.html'):
			filelist = [];
			with open(fileItem, 'r', buffering=163840, encoding='utf8') as srcHtml:
				with open(outDir+os.sep+fileItem, 'w', buffering=163840, encoding='utf8') as outHtml:
					line = srcHtml.readline();
					while line:
						bItem = BeautifulSoup(line,'html.parser');
						if(bItem.script == None or bItem.script['class'][0] not in noMergeJs):
							outHtml.write(line)
						else:
							filelist.append(bItem.script['src'])
							if(bItem.script['class'][0] == 'comEnd'):
								outHtml.write(mergeJs(filelist)+'\n')
						line = srcHtml.readline();
		else:
			shutil.copyfile(fileItem,outDir+os.sep+fileItem)
	elif(fileItem != outDir):
		shutil.copytree(fileItem,outDir+os.sep+fileItem)

原始的html文件:

<!DOCTYPE html>
<html>
<head>
	<title>合并js文件测试</title>
	<style type="text/css">
		h2{
			text-align: center;
			margin-top: 20px;
		}
	</style>
</head>
<body>
<h2>合并js文件测试</h2>
<p>可以看到,comitem是需要合并的文件,comEnd是标志合并的结束,此文件会进入合并文件,class未赋值的不会进行合并,强调,目前的方案必须写上class</p>
<script src="js\a.js" class="comitem"></script>
<script src="js\b.js" class="comitem"></script>
<script src="js\c.js" class="comitem"></script>
<script src="js\d.js" class="comEnd"></script>
<script src="js\e.js" class=""></script>
<script src="js\f.js" class=""></script>
</body>
</html>

合并后的HTML文件:

<!DOCTYPE html>
<html>
<head>
	<title>合并js文件测试</title>
	<style type="text/css">
		h2{
			text-align: center;
			margin-top: 20px;
		}
	</style>
</head>
<body>
<h2>合并js文件测试</h2>
<p>可以看到,comitem是需要合并的文件,comEnd是标志合并的结束,此文件会进入合并文件,class未赋值的不会进行合并,强调,目前的方案必须写上class</p>
<script src="mergeJs\a_b_c_d.js"></script>
<script src="js\e.js" class=""></script>
<script src="js\f.js" class=""></script>
</body>
</html>

备注:可以看到合并的js文件被放在了一个mergeJs的目录下,这个目录是新建的文件夹!

感谢看完指鹤文章,希望指鹤的文章对您有所帮助。

闲暇时,指鹤喜欢写一些文章,部分发表在了豆瓣网与17K中文网,若是您对此感兴趣,您可以点击下面连接支持下指鹤,指鹤在此表示感谢了

绝命笔记 一封匿名信引发的追寻 迷案追凶 量子危机 玄冥石 神魔序曲 杂集地址

Leave a Reply

Your email address will not be published.