使用yuicompressor压缩及合并js,css静态资源

阅读更多

版权所有，转载请注明来源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) 
 
  
 
 
 

• 
• 大小: 24.1 KB

• 
• 大小: 15 KB

• 
• 大小: 12.9 KB

• yui-compressor-demo.rar (991 KB)
• 下载次数: 296

• 查看图片附件