:::

在 PHP 使用 YUI Compressor 壓縮 JavaScript 跟 CSS

11月 15, 2011 , , , , , , 0 Comments Edit Copy Download

2011-11-14_232832 yui logo

我在寫程式的時候，習慣搭配程式註解一併撰寫。寫JavaScript就搭配JSDoc，寫CSS就搭配CSSDoc，寫著寫著程式碼就會非常非常地龐大，造成使用者每次都要下載過大的檔案內容而效率緩慢。

YUI是一套開放原始碼的JavaScript與CSS框架，以BSD授權條款開放使用。它其中一個相當知名的功能是JavaScript與CSS的壓縮器(compressor)。這篇是要教你如何在PHP的環境中使用YUI Compressor來壓縮JavaScript與CSS。

安裝配置

由於這篇的目的是使用PHP作為開發環境，相信你已經有了一個運作PHP的環境。我自己的測試環境是以XAMPP 1.7.0架設，使用PHP 5.2.8。

首先，你要準備一個資料夾，用來擺放YUI Compressor與相關檔案。

再來將以下檔案下載到該資料夾中：

安裝Java

由於YUI Compressor使用Java，你必須確保你的環境中安裝了JDK才行。請到Java網站下載Java Platform (JDK)，他有提供Windows與Linux各種版本。

然而我在CentOS作業系統中安裝JDK 7u1時不知為何地失敗了，所以我又回頭去裝了JDK 6u12。

下載之後，請調整該檔案的權限為755，然後執行該檔案。舉例來說指令如下：

[root@dspace ~]# chmod 755 jdk-6u12-linux-i586-rpm.bin
[root@dspace ~]# ./jdk-6u12-linux-i586-rpm.bin

如要確認Java能夠使用，請輸入以下指令並可能會看到如下訊息：（可能是因為我先裝7u1失敗的關係，以下版本顯示的是7u1而不是6u12）

[root@dspace ~]# java -version
java version "1.7.0_01"
Java(TM) SE Runtime Environment (build 1.7.0_01-b08)
Java HotSpot(TM) Client VM (build 21.1-b02, mixed mode)

這樣就完成配置囉。

壓縮使用

使用YUI Compressor時，要先引用Minify_YUICompressor.php，然後透過它的靜態方法minifyJs()跟minifyCss()來輸入要壓縮的程式碼，並取得壓縮過後的程式碼。

以下是minifyJs跟minifyCss的用法：

/**
* Minify a Javascript string
* 
* @param string $js
* 
* @param array $options (verbose is ignored)
* 
* @see http://www.julienlecomte.net/yuicompressor/README
* 
* @return string 
*/
public static function minifyJs($js, $options = array())

/**
 * Minify a CSS string
 * 
 * @param string $css
 * 
 * @param array $options (verbose is ignored)
 * 
 * @see http://www.julienlecomte.net/yuicompressor/README
 * 
 * @return string 
 */
public static function minifyCss($css, $options = array())

使用範例

為了讓大家更容易理解如何使用，請下載以下兩個範例檔案到上述Minify_YUICompressor.php跟yuicompressor-2.4.6.jar的同一個資料夾中。

我們先看一下blogger-template.css的原始碼，這是一個沒有經過壓縮的CSS程式，大概長得像下面這樣子，程式碼大小為19.9KB：

2011-11-14_232059 blogger-template.css

然後我們再透過minifyCss.php看一下壓縮過的樣子，壓縮過後程式碼大小為13.4KB，足足有67.3%的壓縮率：

2011-11-14_232133 minifyCss.php

以下是minifyCss.php的程式碼內容。這裡面包括了在HTTP標頭輸出為CSS格式的指令，以協助瀏覽器正確判斷資料內容。

<?php
header('Content-type: text/css', TRUE);

include("Minify_YUICompressor.php");
$script = file_get_contents("blogger-template.css");
$packed = Minify_YUICompressor::minifyCss($script);
echo $packed;

而JavaScript也是以此類推，以下是minifyJs.php壓縮JavaScript的標頭輸出與壓縮寫法：

<?php
header('Content-type: text/javascript', TRUE);

include("Minify_YUICompressor.php");
$script = file_get_contents("puliBloggerDigest.js");
$packed = Minify_YUICompressor::minifyJs($script);
echo $packed;

致謝與修改過程

YUI Compressor雖然一般是要透過Java以指令列的方式運作，不過多虧了minify專案開發了Minify_YUICompressor.php，讓我們得以輕易地以PHP使用YUI Compressor。

然而由於原本的Minify_YUICompressor.php需要將YUI Compressor跟暫存目錄指定為絕對路徑，我覺得不是很好用，所以將暫存目錄改為系統自訂的暫存目錄、YUI Compreesor改為跟Minify_YUICompressor.php相同的目錄，讓我們只要把兩個檔案擺在一起就能夠使用。這樣在程式碼轉移的時候特別方便，例如將PHP系統從Windows轉移到Linux的時候。

結語：最好搭配快取機制一起使用

YUI Compressor的壓縮功能雖然挺好用的，搭配上Minify程式之後就更容易讓PHP取用，但是運作效率卻有待堪慮。我在Windows環境中請YUI Compressor壓縮1MB左右的JavaScript的時候，通常會延遲個3秒鐘左右才完成。儘管這是因為我檔案太大的關係，但是如果太過頻繁的壓縮，恐怕仍會帶來效率上的問題。

我建議在使用YUI Compressor的時候，同時搭配一些快取機制(cache)，將YUI Compressor的壓縮結果另存為一個靜態的JavaScript或CSS程式碼。下次就能讓系統直接讀取壓縮結果，而不需要經過YUI Compressor的壓縮。

訂閱： 張貼留言 (Atom)