详解使用Minify紧缩css和js文件

怎样使用Minify紧缩css和js文件

Minify 是用PHP5开发的利用，通过遵照一些Yahoo的优化规则来提高网站的机能。它汇合并多个CSS或者JavaScript文件，移除一些不必要的空格和注释，停止gzip紧缩，并且会设定阅读器的缓存头。Minify 在设计上和Yahoo的 Combo Handler Service非常像，不外Minify可以合并任何你想要合并的JavaScript和CSS文件。

一样状况下，网站速度的瓶颈都在前端，而最关键的就是资源的加载速度，但是大多数阅读器都有单个域名并发恳求数限制，所以假如一个页面中存在许多的资源，比方CSS和JavaScript文件，那么明显会落低网站的加载速度，比力好处置方式就是把多个文件通过一个恳求来拜访，这样既不会影响此前的文件保护，又会减少资源的分明数目，Minify就是为之而生。下面是一些被Minify采纳的 Yahoo! 优化原则：

Minify把CSS和JS紧缩和削减(Minify：去除空格回车符等)，乃至把多个CSS，JS文件整合到一个文件里。不要认为你的大带宽没有必要停止这类优化。使用它的理由更重要的是文件合并，而不是紧缩，而是文件整合，这样可以减少阅读器端不竭发出新的连接恳求，就像FTP效劳器一样，多个小文件和一个大文件耗时是不一样的。

Minify是用PHP写的，项目地址 http://code.google.com/p/minify/

1. 下载最新的Minify然后解紧缩到minify名目。

2. 复制"min"名目到你的DOCUMENT_ROOT，也就是网站根名目。

根本用途

例如：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://liqingbo.cn/min/builder/

紧缩单个文件

比方说，你要效劳于这个文件：

http://liqingbo.cn/wp-content/themes/default/default.css

下面是“Minify网址”该文件：

http://liqingbo.cn/min/?f=wp-content/themes/default/default.css

换句话说，“f”参数设定为从WEB根途径下的目标文件(不需要途径/)”。由于CSS文件大概包括相对URI，Minify会主动通过重写机制寻到它们。

合并多个文件到一个文件下载

用','分隔f参数的每一个文件名。

比方，有如下CSS文件：

http://liqingbo.cn/scripts/jquery-1.2.6.js

http://liqingbo.cn/scripts/site.js

您可以通过Minify结合起来：

http://example.com/min/?f=scripts/jquery-1.2.6.js,scripts/site.js

简化根本途径

假如你合并的文件同享统一父名目，你可以使用b参数设定的f参数的根本名目(一样不包罗前导或者后缀/字符)。

例如，以下两种写法结果雷同：

http://liqingbo.cn/min/?f=scripts/jquery-1.2.6.js,scripts/site.js,scripts/home.js

http://liqingbo.cn/min/?b=scripts&f=jquery-1.2.6.js,site.js,home.js

在Html中使用MINIFY

在(X)HTML文件，不要健忘将&更换为&

指定同意的名目

默许状况下，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。例如：

// 此前确保min/lib名目设定到include_path
// add /min/lib to your include_path first!
require $_SERVER['DOCUMENT_ROOT'] . '/min/utils.php';
$jsUri = Minify_groupUri('js');
echo " ";

调试模式

在调试模式下，Minify不紧缩文件，而是发送合并后的带有行号的文件。要启用该模式，在config.php中设定为$min_allowDebugFlag为true，并增添"&debug=1" 到你的URIs.

例如：/min/?f=script1.js,script2.js&debug=1

注：关于该模式，注释风格的字符串正则表达式大概会致使问题。

把min名目上传根名目，根名目翻开http://example.com/min/

Note: Please set $min_cachePath in /min/config.php to improve performance.

设定/min/config.php文件 ，$min_cachePath 有3个选中。

//$min_cachePath = ‘c://WINDOWS//Temp’;
//$min_cachePath = ‘/tmp’;
//$min_cachePath = preg_replace(‘/^//d+;/’, ”, session_save_path());

选中第2个，去除// .设定tmp属性777

在显示的界面中参加你想合并紧缩的 js/css 途径，点击 ‘Update’ 之后会为你生成一个 url

如：http://localhost/min/b=googletesting/js& f=mootools.js,iAction.js,iAjax.js,global.js，css和JS离别合并，2个地址。

假如需要组合的文件许多，url 就会变得很长，Minify 支撑 group，可以将这些文件分组，这样 url 中只需指定 g=group名字 就可以了。

安置完毕后删除min/builder/index.php 文件。防止其别人登陆!后期如需编纂再次上传!

如有不清楚的地方，可以给我留言，我们可以一起商量一下。

引荐教程：《JS根基教程》

以上就是详解使用Minify紧缩css和js文件的具体内容，更多请关注百分百源码网其它相关文章！