minify合并js和css文件

压缩 JavaScript 和 CSS，是为减少文件大小，节省流量开销；合并 JavaScript 和 CSS，是为了减少请求数量，减轻服务器压力。而这些枯燥又没有技术含量的工作，我们以前通常会手动处理，费时又费力。其实这些工作可以让一些工具为我们代劳，比如说，今天我推荐的这个工具—— Minify。 

首先，先来看一下 Minify 在我的 WordPress 上使用的效果吧。 

上图是本站首页的 JS 请求，从图中可以看出，这一个 JS 请求中，合并了 jquery.js,jquery-ui.js,public.js,index.js 这四个 JavaScript 文件，同理，CSS 文件的合并压缩形式也是如此。 

那我们怎么使用 Minify 呢？Minify 是 Google Code 上的一个开源项目，我们可以前往这里围观。安装方法如下： 

1、下载 Minify 并把 min 文件夹上传至你的主题文件夹下。 
2、配置 Minify，编辑 config.php 文件，可依据注释配置。（不配置也可使用 Minify） 
3、修改引入的 JavaScript 和 CSS 的链接地址。比如： 

之前我在首页需要引入四个 JavaScript 文件： 

<script src="http://jb51.net/wp-content/themes/wange/js/jquery.js"></script> 
<script src="http://jb51.net/wp-content/themes/wange/js/jquery-ui.js"></script> 
<script src="http://jb51.net/wp-content/themes/wange/js/public.js"></script> 
<script src="http://jb51.net/wp-content/themes/wange/js/index.js"></script> 
而现在，我只需引入这一个 JavaScript 文件即可： 

<script src="http://jb51.net/wp-content/themes/wange/min/?b=wp-content/themes/wange/js&f=jquery.js,jquery-ui.js,public.js,index.js"></script> 
这样一来，就可以简单地完成了从服务器端在线合并压缩 JavaScript 和 CSS 文件，可能你已经看出来了，Minify 并不只是针对 WordPress 可用，只要你的服务器有 PHP5 的环境就可以使用，所以你也可以在其他项目中或工作中使用它，会减轻你的工作量，提高项目质量。

 

基本用法 
假设你有http://localhost/a.js,http://localhost/b.js两个文件。那么现在，你可以使用http://localhost/min/?f=a.js,b.js,看看浏览器返回结果，是不是minify的两个js文件的内容? 

附译min目录下的README.txt 

引用

该目录中的文件包含默认Minify设置，旨在简化整合您的网站。Minify将合并削减JavaScript或CSS文件，并进行HTTP压缩和缓存头。 

推 荐 
建议修改config.php中设置$min_cachePath到一个PHP可写目录。这将提高性能。 

GETTING STARTED 
最快的开始Minify的方法是使用Minify Builder应用程序的URI 
访问您的网站：http://example.com/min/builder/ 

压缩单个文件 
比方说，你要服务于这个文件： 
  http://example.com/wp-content/themes/default/default.css 
下面是“Minify网址”该文件： 
  http://example.com/min/?f=wp-content/themes/default/default.css 

换句话说，“f”参数设置为从WEB根路径下的目标文件（不需要路径/）”。由于CSS文件可能包含相对URI，Minify会自动通过重写机制找到它们。 

合并多个文件到一个文件下载 
用','分隔f参数的每一个文件名。 
比如，有如下CSS文件： 
  http://example.com/scripts/jquery-1.2.6.js 
  http://example.com/scripts/site.js 
您可以通过Minify结合起来： 
  http://example.com/min/?f=scripts/jquery-1.2.6.js,scripts/site.js 

简化基本路径 
如果你合并的文件共享同一父目录，你可以使用b参数设置的f参数的基本目录（同样不包括前导或者后缀/字符）。 
例如，以下两种写法效果相同： 
  http://example.com/min/?f=scripts/jquery-1.2.6.js,scripts/site.js,scripts/home.js 
  http://example.com/min/?b=scripts&f=jquery-1.2.6.js,site.js,home.js 

在Html中使用MINIFY 
在（X）HTML文件，不要忘记将&替换为&amp; 

指定允许的目录 
默认情况下，Minify不会有任何DOCUMENT_ROOT范围内的*.css/*.js文件。如果你希望限制Minify存取某些目录，在config.php中设置 
$min_serveOptions ['minApp'] ['allowDirs']数组。例如：限制到/js和/themes/default目录，使用： 

$min_serveOptions['minApp']['allowDirs'] = array('//js', '//themes/default');

"组"：更快的性能和更好的网址 
为了获得最佳性能，编辑groupsConfig.php中的预指定文件组，下面是一个例子配置： 

return array(
    'js' => array('//js/Class.js', '//js/email.js')
);

以上预指定js将结果是合并了如下文件： 
  http://example.com/js/Class.js 
  http://example.com/js/email.js 
现在，您可以如此简化URL： 
  http://example.com/min/?g=js 
  
组：指定document_root目录以外的文件 
在groupsConfig.php阵中,//是指向DOCUMENT_ROOT，但你也可以指定从系统的绝对目录路径或相对于document_root的相对目录： 

return array(
  'js' => array(
    '//js/file.js'            // file within DOC_ROOT
    ,'//../file.js'           // file in parent directory of DOC_ROOT
    ,'C:/Users/Steve/file.js' // file anywhere on filesystem
  )
);

未来过期HTTP头 
Minify可以发送未来（一年）过期HTTP头。要启用该功能，您必须添加一个数字到URIs（例如/min/?g=js&1234 or /min/f=file.js&1234），每当源文件修改时改变该数字。如果你使用SVN/CVS，你可以考虑使用修订版号作为该数字。 

如果使用"组"来合并压缩你的文件，可以使用工具函数Minify_groupUri()来得到一个“版本”的URI。例如： 

<?php
// 之前确保min/lib目录设置到include_path
// add /min/lib to your include_path first!
require $_SERVER['DOCUMENT_ROOT'] . '/min/utils.php';
$jsUri = Minify_groupUri('js');
echo "<script type='text/javascript' src='{$jsUri}'></script>";

调试模式 
在调试模式下，Minify不压缩文件，而是发送合并后的带有行号的文件。要启用该模式，在config.php中设置为$min_allowDebugFlag为true，并增加"&debug=1" 到你的URIs. 
例如：/min/?f=script1.js,script2.js&debug=1 

注：对于该模式，注释风格的字符串正则表达式可能会导致问题。 
更多问题请访问 http://groups.google.com/group/minify