-
写 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/
CSS和JS文件合并工具
3597人参与 |分类: 资源中心|时间: 2012年10月08日
相关文章
- 2020-02-21最好用的Windows激活工具?这几个Windows激活工具值得收藏
- 2019-02-15最简单易用的谷歌访问助手
- 2018-10-21多线程下载神器 IDM v6.33.3 免注册绿色便携版
- 2017-12-29迅雷公司内部工作人员用的迅雷下载试用工具不限速无广告
- 2017-12-14Office2016四合一优化增强版(已激活)
- 2017-07-30Access数据库转换成MySQL数据库的软件
- 2017-06-25Linux自动磁盘挂载工具 BT-Panel 1.0
- 2017-04-28单机游戏下载利器:盖伦游戏下载器
- 2017-03-18网吧存储器1.2.3绿色版
- 2017-03-11蓝屏文件分析工具Crash Dump Analyzer v2.0.0.3(2016.6.29更新)
评论专区请在后台修改