版权所有，转载请注明来源http://gogo1217.iteye.com，违者必究！
在做WEB企业应用时，都会涉及到的CSS和JS的编写。随着项目的推进，这些文件如果写在同一个文件中，造成维护的困难，找一个需要修改的地方很麻烦。所以，好的做法是根据JS的功能划分为多个小的JS文件，页面通过某种方式间接引用这些小的JS文件。
这里推荐yahoo的一个js/css压缩工具YUI Compressor ,目前最新版本是2.4.6。
1.下载文件后，新建工程目录如下所示：
2.ant脚本及配置文件如下：
ant脚本build.xml文件代码如下：
由于在实际项目中，我们需要对不同的目录的资源文件压缩，因此一般通过循环完成多个目录的压缩。在本配置文件中，使用了额外的一个ant任务扩展包ant-contrib,下载地址为：http://ant-contrib.sourceforge.net/. 该包在ant的基础上扩展了多个自定义任务。
yui-compressor-demo create by gogo1217 2011-9-4 http://gogo1217.iteye.com/
build.properties配置文件代码如下：
##工程根目录
project.dir=..
##app目录
resource.dir=${project.dir}/resources
resources.include=css,js
##依赖包
lib.dir = ${project.dir}/lib
lib.build=${lib.dir}/build
lib.build.yuicompressor= ${lib.dir}/build/yuicompressor-2.4.6.jar
lib.build.antcontrib= ${lib.dir}/build/ant-contrib-1.0b3.jar
#发布目录
deploy.dir=${project.dir}/deploy
deploy.resource=${deploy.dir}/resources
3.在build.xml上右键，选择“Run-As”-》“Ant Build”，控制台结果为：
4.工程中新建了目录deploy及相关的子目录如下所示：
其中 demo-src.css和demo-src.js为压缩后的源文件，发布时，带上源文件便于使用者能覆盖重写和查找问题。demo-min.css和demo-min.js为压缩后的代码。
demo-src.js源码如下:
/**
* @description mi命名空间
* @namespace mi命名空间
* @version 0.1
*/
var mi = {
/**
* 设置cookie
*
* @param {String}
* name cookie name
* @param {Object}
* value cookie value
* @param {Number}
* days 保持天数，单位天 0表示永久不实效，小于0表示立马实效
*/
setCookie : function(name, value, days) {
if(name && value) {
var expires = '';
if(days) {
var d = new Date();
d.setTime(d.getTime() + days * 24 * 60 * 60 * 1000);
expires = '; expires=' + d.toGMTString();
}
document.cookie = name + '=' + encodeURIComponent(value) + expires + '; path=/';
}
},
/**
* 读取cookie
*
* @param {String}
* sName cookie内的名称
* @returns {Object} 该cookie的内容
*/
getCookie : function(name) {
var cookieValue = null;
if(document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for(var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
if(cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
},
/**
* 删除cookie
*
* @param {String}
* name 所要删除cookie中的名称
*/
removeCookie : function(name) {
this.setCookie(name, '', -1);
}
};
/**
* @namespace 表单相关
* @version 0.1
*/
mi.form = {
};
demo-min.js源码如下：
var mi={setCookie:function(b,c,f){if(b&&c){var a="";if(f){var e=new Date();
e.setTime(e.getTime()+f*24*60*60*1000);a="; expires="+e.toGMTString()}
document.cookie=b+"="+encodeURIComponent(c)+a+"; path=/"}},
getCookie:function(a){var e=null;if(document.cookie&&document.cookie!="")
{var d=document.cookie.split(";");for(var c=0;c
由于排版问题，因此本是一行现实的demo-min.js被换行成多行了。
压缩的好处
上面对比可以看出yui-compress能将删除 全部 的 注释、 换行和 多余的 空白字符 ，并且将中间变量简化为单个字符 ，从而大大的减少js和css文件的体积。将页面的资源文件压缩在一个文件中，从而减少页面的请求次数，也减少了服务器的压力和提高了页面的相应速度，是页面的优化的一项重要的措施。
文件拆分后页面引入的统一措施
由于将css和js文件拆分为多个文件，如果不做处理，开发时页面的需要引入多个文件，但在发布时确只需要引入单个文件。为了统一开发和发布的环境，css可以通过@import命令达到统一，而js可以通过js添加javascript标签动态引入所拆分的小的js达到统一，如在本例中，页面只需要引入demo.css和demo.js即可。
在实际开发中，可能还会遇到不同的页面引入不同的css，但是又会引入共同的css的情况，这均可以通过concat命令生成单个文件完成。
demo.css示例
@import url(00-clean.css);
@import url(01-global.css);
@import url(02-form.css);
demo.js示例
getContextPath = function() {
var contentPath = '';
var link = document.getElementsByTagName('script');
for(var q = 0; q < link.length; q++) {
var h = !!document.querySelector ? link[q].src : link[q].getAttribute("src", 4), i;
if(h && ( i = h.indexOf('resources/js/demo.js')) >= 0) {
var j = h.indexOf('://');
contentPath = j < 0 ? h.substring(0, i - 1) : h.substring(h.indexOf('/', j + 3), i - 1);
return contentPath;
}
};
return contentPath;
}
importJS = function(url) {
document.write('');
}
importJS('00-common.js');
importJS('11-form.js');
本文中的实例工程打包下载：
yui-compressor-demo.rar (991 KB)
