如何使用Minify壓縮css和js文件

Minify 是用PHP5開(kāi)發(fā)的應(yīng)用，通過(guò)遵循一些Yahoo的優(yōu)化規(guī)則來(lái)提高網(wǎng)站的性能。它會(huì)合并多個(gè)CSS或者JavaScript文件，移除一些不必要的空格和注釋，進(jìn)行g(shù)zip壓縮，并且會(huì)設(shè)置瀏覽器的緩存頭。Minify 在設(shè)計(jì)上和Yahoo的 Combo Handler Service非常像，不過(guò)Minify可以合并任何你想要合并的JavaScript和CSS文件。

一般情況下，網(wǎng)站速度的瓶頸都在前端，而最關(guān)鍵的就是資源的加載速度，但是大多數(shù)瀏覽器都有單個(gè)域名并發(fā)請(qǐng)求數(shù)限制，所以如果一個(gè)頁(yè)面中存在很多的資源，比如CSS和JavaScript文件，那么明顯會(huì)降低網(wǎng)站的加載速度，比較好處理方式就是把多個(gè)文件通過(guò)一個(gè)請(qǐng)求來(lái)訪問(wèn)，這樣既不會(huì)影響之前的文件維護(hù)，又會(huì)減少資源的清楚數(shù)量，Minify就是為之而生。下面是一些被Minify采用的 Yahoo! 優(yōu)化準(zhǔn)則：

Minify把CSS和JS壓縮和削減(Minify：去掉空格回車符等)，以及把多個(gè)CSS，JS文件整合到一個(gè)文件里。不要以為你的大帶寬沒(méi)有必要進(jìn)行這類優(yōu)化。使用它的理由更重要的是文件合并，而不是壓縮，而是文件整合，這樣可以減少瀏覽器端不斷發(fā)出新的連接請(qǐng)求，就像FTP服務(wù)器一樣，多個(gè)小文件和一個(gè)大文件耗時(shí)是不一樣的。

Minify是用PHP寫的，項(xiàng)目地址 http://code.google.com/p/minify/

1. 下載最新的Minify然后解壓縮到minify目錄。

2. 復(fù)制"min"目錄到你的DOCUMENT_ROOT，也就是網(wǎng)站根目錄。

基本用法

例如：http://localhost/a.js,http://localhost/b.js兩個(gè)文件。那么現(xiàn)在，你可以使用http://localhost/min/?f=a.js,b.js,看看瀏覽器返回結(jié)果，是不是minify的兩個(gè)js文件的內(nèi)容?

附譯min目錄下的README.txt

引用

該目錄中的文件包含默認(rèn)Minify設(shè)置，旨在簡(jiǎn)化整合您的網(wǎng)站。Minify將合并削減JavaScript或CSS文件，并進(jìn)行HTTP壓縮和緩存頭。

推 薦

建議修改config.php中設(shè)置$min_cachePath到一個(gè)PHP可寫目錄。這將提高性能。

GETTING STARTED

最快的開(kāi)始Minify的方法是使用Minify Builder應(yīng)用程序的URI

訪問(wèn)您的網(wǎng)站：http://liqingbo.cn/min/builder/

壓縮單個(gè)文件

比方說(shuō)，你要服務(wù)于這個(gè)文件：

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

下面是“Minify網(wǎng)址”該文件：

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

換句話說(shuō)，“f”參數(shù)設(shè)置為從WEB根路徑下的目標(biāo)文件(不需要路徑/)”。由于CSS文件可能包含相對(duì)URI，Minify會(huì)自動(dòng)通過(guò)重寫機(jī)制找到它們。

合并多個(gè)文件到一個(gè)文件下載

用','分隔f參數(shù)的每一個(gè)文件名。

比如，有如下CSS文件：

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

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

您可以通過(guò)Minify結(jié)合起來(lái)：

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

簡(jiǎn)化基本路徑

如果你合并的文件共享同一父目錄，你可以使用b參數(shù)設(shè)置的f參數(shù)的基本目錄(同樣不包括前導(dǎo)或者后綴/字符)。

例如，以下兩種寫法效果相同：

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文件，不要忘記將&替換為&

指定允許的目錄

默認(rèn)情況下，Minify不會(huì)有任何DOCUMENT_ROOT范圍內(nèi)的*.css/*.js文件。如果你希望限制Minify存取某些目錄，在config.php中設(shè)置

$min_serveOptions ['minApp'] ['allowDirs']數(shù)組。例如：限制到/js和/themes/default目錄，使用：

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

"組"：更快的性能和更好的網(wǎng)址

為了獲得最佳性能，編輯groupsConfig.php中的預(yù)指定文件組

下面是一個(gè)例子配置：

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

以上預(yù)指定js將結(jié)果是合并了如下文件：

http://example.com/js/Class.js

http://example.com/js/email.js　

現(xiàn)在，您可以如此簡(jiǎn)化URL：

http://example.com/min/?g=js

組：指定document_root目錄以外的文件

在groupsConfig.php陣中,//是指向DOCUMENT_ROOT，但你也可以指定從系統(tǒng)的絕對(duì)目錄路徑或相對(duì)于document_root的相對(duì)目錄：　

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     　　) 　　);

未來(lái)過(guò)期HTTP頭

Minify可以發(fā)送未來(lái)(一年)過(guò)期HTTP頭。要啟用該功能，您必須添加一個(gè)數(shù)字到URIs(例如/min/?g=js&1234 or /min/f=file.js&1234)，每當(dāng)源文件修改時(shí)改變?cè)摂?shù)字。如果你使用SVN/CVS，你可以考慮使用修訂版號(hào)作為該數(shù)字。

如果使用"組"來(lái)合并壓縮你的文件，可以使用工具函數(shù)Minify_groupUri()來(lái)得到一個(gè)“版本”的URI。例如：

// 之前確保min/lib目錄設(shè)置到include_path // add /min/lib to your include_path first! require $_SERVER['DOCUMENT_ROOT'] . '/min/utils.php'; $jsUri = Minify_groupUri('js'); echo " ";

調(diào)試模式

在調(diào)試模式下，Minify不壓縮文件，而是發(fā)送合并后的帶有行號(hào)的文件。要啟用該模式，在config.php中設(shè)置為$min_allowDebugFlag為true，并增加"&debug=1" 到你的URIs.

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

注：對(duì)于該模式，注釋風(fēng)格的字符串正則表達(dá)式可能會(huì)導(dǎo)致問(wèn)題。

把min目錄上傳根目錄，根目錄打開(kāi)http://example.com/min/

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

設(shè)置/min/config.php文件 ，$min_cachePath 有3個(gè)選擇。

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

選擇第2個(gè)，去除// .設(shè)置tmp屬性777

在顯示的界面中加入你想合并壓縮的 js/css 路徑，點(diǎn)擊 ‘Update’ 之后會(huì)為你生成一個(gè) url

如：http://localhost/min/b=googletesting/js& f=mootools.js,iAction.js,iAjax.js,global.js，css和JS分別合并，2個(gè)地址。

如果需要組合的文件很多，url 就會(huì)變得很長(zhǎng)，Minify 支持 group，可以將這些文件分組，這樣 url 中只需指定 g=group名字 就可以了。

安裝完畢后刪除min/builder/index.php 文件。防止其他人登陸!后期如需編輯再次上傳!

如有不明白的地方，可以給我留言，我們可以一起探討一下。

推薦教程：《JS基礎(chǔ)教程》