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。

YComboGUI 下载地址：百度网盘

JCombo 下载地址：百度网盘

JavaScript 压缩器地址：http://tool.lu/js/

来源：陈德馨博客（微信/QQ号：35435164），转载请保留出处和链接！

陈德馨