思考上线之后文件合并的问题。
根据个人思考,合并部署文件主要分以下步骤:
//1 读取文件,获取字符流
//2 扫描字符串,进行正则匹配,读取中需要合并的文件路径,放入数组
//3 根据数组,读取文件,对不同的文件进行合并
//4 合并需要用到文本摘要算法
//5 这里要注意,针对css 文件中的背景图片同样需要进行匹配,这样在上线可以解决缓存的问题。
//6 写入新文件
//7 在html文件中,加入新的文件路路径
其中麻烦一点,可能就是扫描扫script问题。
自己琢磨得出两个正则匹配文件script节点如下,也算是对正则功力的一种提升吧:
var reg = /<script[\s]+[^>]+=[\s]*[^>]+><\/script>/;
var reg2 = /<script[\s]+(?:[^>]+=[\s]*[^>]+)*(?:src[\s]*=[\s]*['"]([^>]+(?:\.js))['"])><\/script>/g;
第一个正则仅仅只是匹配<script>节点,并且包含属性。
第二个正则相对第一个要更加的准确,匹配script节点中,是否存在src属性,如不存在,那么可能只是script片段,并非外部引用的
js文件。当然这里还存在一个问题,type并没有做javascript匹配,毕竟可能存在前端模版类的js,如type='text/html'.
这里需要注意几点:
1 [\s]+ 表示必须存在空格,如 <script后面,不能直接跟属性,必须有空格隔开.
2 ?: 表示非捕捉匹配,是为了让 $1能正确的匹配到自己想到的元素,这里我更加想得到文件的具体路径。所以第一个括号,就不匹配了,
方便$1给直接获取,同时不捕捉也能提升效率。
至于其它的步骤,采用nodejs皆可以实现。
偶有所悟,谨防忘记。
原文链接:https://www.f2er.com/regex/360226.html