CSS 和 JS 文件合并工具
写 CSS 和 JavaScript 的时候, 我们会遇到一个两难的局面: 要么将代码写在一个大文件, 要么将代码分成多个文件. 前者导致文件难以管理, 代码复用性差, 后者则因为需要在载入多个文件令页面性能下降. 我们期望可以将代码细分成多个模块, 而在使用的时候可以合而为一.
本文会介绍一个 CSS 和 JS 的合并工具, 对模块化的文件进行管理.
CSS 和 JS 合并工具的发展
对于 CSS/JS 合并和压缩的问题, 有很多解决方案, 我所在的团队也经历了几个阶段.
- 网站刚刚搭建的时候, 纯属的手动合并 CSS 和 JS 文件.
- 因为手动易出错, 繁琐, 改为使用配置文件来管理. 当时我们用 JS Builder 和我自己写的一个叫 CSS Builder 的程序来管理, 后来同事楠乔做了一个叫 YCombo 的工具, 合并这两个工具的功能.
- 网站扩大, 文件多起来配置文件的管理也成为负担, 所以由 URL 作为配置, 比如:
http://a|b|c.css则合并 a.css, b.css 和 c.css 三个文件; 还通过专门的服务来寻找页面中使用的 JavaScript 并自动合并.
无疑第三种的处理方式最完美, 开发者省心省力, 但因为需要专门的服务管理和部署策略. 对小型网站和个人网站来说, 前面提到的第二种方案更为实用. 本文会介绍一下这款叫 YCombo 的工具和对应的两个 GUI 工具.
YCombo 介绍
顾名思义, 它主要为了解决合并 CSS 和 JS 文件的工作, 需要依赖一个命名为 .css.seed 或者 .js.seed 的配置文件. 比如: 现在有配置文件 xxoo.js.seed, 通过 YCombo 处理后在同目录可以得到合并后的 JS 文件 xxoo.js.
YCombo 已经发布在 Github, 需要 JRE 1.6 或以上版本支持, 执行操作如下:
java -jar ycombo.jar [参数列表] [配置文件地址]
对应的参数列表和相关说明请查阅 YCombo 文档.
配置文件
.css.seed 和 .js.seed 支持两种特殊语法:
// #require "PATH"和/* #require "PATH" */, 引用绝对路径的文件或者相对于本配置路径的文件.// #require <PATH>和/* #require <PATH> */, 引用基于 root 目录的文件.
YCombo 会按后续遍历顺序加载配置文件, 解决依赖问题和进行去重处理. 这里是个遍历顺序的例子:
SEED
/\
A B
/ /\
C C D
/ / /\
E E F G
文件引入和合并的顺序如下:
E > C > A > F > G > D > B > SEED
用户界面工具
如果前面的使用方法你看不出头绪, 没有关系. 为了方便用户使用, 我们做了两个 GUI 版本: YComboGUI 和 JCombo.
- YComboGUI: 是 YCombo 作者做的一个依赖 .NET framework 的版本, 可以在 Windows 系统使用. [下载]
- JCombo: 因为有些开发没有 Windows 开发环境, 我做的一个基于 Java 的版本, 可以在所有操作系统使用. [下载]
后话
我自己的网站一直使用 YCombo 来合并 JavaScript, 再通过 JavaScript 压缩和混淆. 我将 JS 拆分成 20 来个小粒度的文件 (包括 jQuery), 总文件大小 280KB, 合并后 170KB, 压缩和混淆后只剩 90KB.
这个工具适合个人网站和小团队开发使用, 欢迎完善, 建议和反馈.
