陈德馨

CSS和JS文件合并工具

1799人参与 |分类: 工具库|时间:2012年10月08日 15:03

写 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 版本:YComboGUIJCombo

YComboGUI:是 YCombo 作者做的一个依赖 .NET framework 的版本,可以在 Windows 系统使用。

JCombo:因为有些开发没有 Windows 开发环境,我做的一个基于 Java 的版本,可以在所有操作系统使用。

jcombo.png

后话

我自己的网站一直使用 YCombo 来合并 JavaScript,再通过 JavaScript 压缩和混淆。我将 JS 拆分成 20 来个小粒度的文件 (包括 jQuery),总文件大小 280KB,合并后 170KB,压缩和混淆后只剩 90KB。

YComboGUI 下载地址:百度网盘

JCombo 下载地址:百度网盘

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

来源:陈德馨博客(微信/QQ号:35435164),转载请保留出处和链接!

地址:

必填

选填

选填

◎已有 0 人评论,请发表您的观点。