本项目利用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` 来启动合并任务。
此流程旨在简化前端资源管理并提高网站性能,特别适合那些拥有大量外部脚本和样式表引用的站点。