使用Node.js解析HTML并提取需合并的JS和CSS，同时更新HTML

简介：
本项目利用Node.js开发，旨在高效解析HTML文档，自动识别并分离出嵌入或链接的JavaScript与CSS文件。随后，它将依据设定规则更新HTML代码，替换为外部资源引用路径，从而优化网页加载性能。此工具适用于前端开发者在构建及维护静态网站时使用。 # 合并JS与CSS 在网站页面上存在过多的外部链接（如js、css文件）会导致网页加载速度变慢。通过将页面中的多个js或css文件合并成一个，可以减少HTTP请求的数量，从而提高页面加载效率。 程序读取配置信息(config.json)，解析HTML文档，并根据特定标签``, ``, ``来识别需要被合并的JS和CSS代码区域。在完成这些资源的合并后，它会更新原始HTML中的相关标签以指向新的单个文件。 ### 配置说明 为了运行此程序，请确保创建了如下几个目录： - **output_path**: 合并后的js、css文件将在此输出。 - **tmp_js_json_dir** 和 **tmp_css_json_dir**: 用于存储合并过程中的临时JSON数据，帮助追踪和管理JS与CSS资源。 配置示例： ```json { extract_tag: [, , ], // 提取区域的标签定义 output_path: D:\\projects\\github_project\\merge_js_css\\examples\\output, // 合并后的文件输出目录 tmp_js_json_dir: D:\\projects\\github_project\\merge_js_css\\examples\\json\\js, // JS合并中间过程文件目录 tmp_css_json_dir: D:\\projects\\github_project\\merge_js_css\\examples\\json\\css, // CSS合并中间过程文件目录 html_dir_path: D:\\projects\\github_project\\merge_js_css\\examples\\html // 待处理的HTML页面所在路径 } ``` ### 开发环境运行 确保安装了以下依赖： - uglify-js: `npm install uglify-js --save-dev` - clean-css: `npm install clean-css --save-dev` - pkg (全局): `npm install -g pkg` 然后，使用命令`node index.js config.json`来执行。 ### 打包为独立可执行文件 为了方便在不同环境下运行，可以将项目打包成一个单独的可执行程序。首先安装pkg工具（如果尚未安装的话），接着通过命令`pkg -t win index.js`生成适用于Windows系统的.exe文件。 最终可以通过命令 `index.exe config.json` 来启动合并任务。 此流程旨在简化前端资源管理并提高网站性能，特别适合那些拥有大量外部脚本和样式表引用的站点。