CSS 和 JS 文件合并工具

写 CSS 和 JavaScript 的时候, 我们会遇到一个两难的局面: 要么将代码写在一个大文件, 要么将代码分成多个文件. 前者导致文件难以管理, 代码复用性差, 后者则因为需要在载入多个文件令页面性能下降. 我们期望可以将代码细分成多个模块, 而在使用的时候可以合而为一.

本文会介绍一个 CSS 和 JS 的合并工具, 对模块化的文件进行管理.

CSS 和 JS 合并工具的发展

对于 CSS/JS 合并和压缩的问题, 有很多解决方案, 我所在的团队也经历了几个阶段.

  1. 网站刚刚搭建的时候, 纯属的手动合并 CSS 和 JS 文件.
  2. 因为手动易出错, 繁琐, 改为使用配置文件来管理. 当时我们用 JS Builder 和我自己写的一个叫 CSS Builder 的程序来管理, 后来同事楠乔做了一个叫 YCombo 的工具, 合并这两个工具的功能.
  3. 网站扩大, 文件多起来配置文件的管理也成为负担, 所以由 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.

这个工具适合个人网站和小团队开发使用, 欢迎完善, 建议和反馈.

<摘自:http://www.neoease.com/css-javascript-combo-tool/>

时间： 2024-10-11 17:37:29

CSS 和 JS 文件合并工具的相关文章

使用System.Web.Optimization对CSS和JS文件合并压缩

在ASP.NET MVC 中JS/CSS文件动态合并及压缩通过调用System.Web.Optimization定义的类ScriptBundle及StyleBundle来实现. 大致步骤如下: 1.App_Start添加: public class BundleConfig { public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new StyleBundle("~/Themes/Homecss&q

使用gulp自动化打包合并前端静态资源（CSS、JS文件压缩、添加版本号）

现在正在做的项目更新迭代比较频繁,会经常对前端代码打包部署,手动整合代码文件很麻烦并且浪费时间,所以决定使用gulp来代替手工完成这项工作. 前端静态资源在发版更新时会面临客户端浏览器缓存的问题(可参考这篇文章),解决这个问题可以采用两类方法:覆盖方法(引用资源时加版本号,不修改资源文件名).非覆盖方法(修改资源文件名),本篇文章主要采用的是第一种加版本号的方式,主要用gulp给静态资源自动加版本号和压缩CSS.JS. 原理:通过对JS,CSS文件内容进行Hash运算,生成一个文件的唯一Hash

如何还原压缩的CSS/HTML/JS文件

一,问题描述 我们经常在进入一家新的公司,或者网上下载一些源码后,拿到他们的CSS/HTML/JS文件都是经过压缩的,如图 随便啰嗦下,为什么人家要压缩,这是为了网页能快速被加载而做的优化 那我们想要把它格式化我们喜欢看的样式,怎么办呢? 二,解决方案 今天提出两种解决方案,大家可以适当选择 1,借助Eclipse.Netbean等有格式化工具的编辑器 优点: 快速.高效.可以快速编辑 缺点: 假如你没有安装这些,你还需要去下载.安装 2,使用CSS\HTML\JS在线格式化工具,百度搜索CSS

django 解决css，js文件304导致无法加载显示问题

这种情况一般会在windows系统下出现 1.前台.后台如果无法加载css等样式.(建议通过此办法来解决) 这是因为你安装的某些IDE 或者其他更改了注册表导致的系统的注册表\HKEY_CLASSES_ROOT\.css的Content Type不是text/css,修改即可.改完记得重启开发服务器并按Ctrl+F5强制刷新页面. 2.前台如果无法加载css等样式.(如果你的后台没问题那就试试这个简单方法) 前提:django1.8 在html页面可以请求道css,js文件并在chrome的开发

JQuery 加载 CSS、JS 文件的方法有哪些？

在进行web前端开发(http://www.maiziedu.com/course/web-px/)时,我们可能会需要使用JQuery加载一个外部的css文件或者js文件,加载外部文件的方法有多种,下面具体看看各种加载方法 JS 方式加载 CSS.JS 文件: //加载 css 文件function includeCss(filename) { var head = document.getElementsByTagName('head')[0]; var link = document.cre

关于JAVA EE项目在WEB-INF目录下的jsp页面如何访问WebRoot中的CSS和JS文件

找了这么久资料,总算解决了 感谢博客园:http://www.cnblogs.com/xsht/p/5275081.html 感谢百度:http://zhidao.baidu.com/link?url=Vz4TlygvnMyYVj105bCuzkusjF0G5rM6opHvEzhcCaJK5s1gFUZ3PBgAWCNsfY1RmtPf4ZEo8EV_Gd7SYKV4S_ 在有Struts部署的Java EE环境中,我们一般把jsp页面写在WebRoot\WEB-INF\content 目录下,

asp.net使用httphandler打包多CSS或JS文件以加快页面加载速度

介绍 使用许多小得JS.CSS文件代替一个庞大的JS或CSS文件来让代码获得更好的可维 护性,这是一个很好的实践.但这样做反过来却损失了网站的性能.虽然你应该将你的Javascript代码写在小文件中并且将大的CSS文件分割到小文件 中,当一个浏览器请求那些JS以及CSS文件,它却将为每一个文件产生一个请求.每一个HTTP请求将导致从你的浏览器到服务器上的一次"往返",从响应 服务器到客户端浏览器之间的等待时间称之为"延时".因此,如果你有四个JS文件以及三个CSS

引用外部.css或.js文件的路径问题

转载自:http://www.blogjava.net/Johnny-Ajun/archive/2011/06/16/352440.html jsp或html页面引用外部.css或.js文件时,注意路劲问题,如果设置不当,会引用不到这些外部的文件假设使用下面的目录结构: -webapp |-MyProject  目录  |--WebContent 目录  |---scripts 目录   ---dtree.js 文件  |---styles 目录   ---main.css 文件   |---p

php ci框架中载入css和js文件失败的原因及解决方法

在将html页面整合到ci框架里面的时候,载入css和js失败. 原因是ci框架是入口的框架 对框架中文件的全部请求都须要经过index.php处理完毕,当载入外部的css和js文件的时候要使 用base_url()函数处理外部的链接. 在控制器中须要先加载url相关的类 public function test() { $this->load->helper('url'); $this->load->view('admin/test'); } 在test.php的view视图中.