Menu

用YUI Compressor把多個JS、CSS壓縮成一個檔案

December 22, 2014 - 網站開發

先講YUI Compressor缺點: 必須依賴JAVA,必須安裝JDK在你的環境上或是Build Server上。

好處是,大部分CI Tool都有支持JAVA,是一個不錯的解決方案,不用刻意綁IDE跟Library。

環境設定:安裝JDK

可以參考 這裡或自行Google

下載YUI Compressor

請參考yuicompressor (Github),當然也可直接下載,或從我的備份,下載完成後請解壓縮,目前最後一個版本是2.4.8。

壓縮JavaScript – 單一檔案

java -jar yuicompressor-2.4.8.jar old.js -o new.min.js --charset utf-8 --type js

 

壓縮JavaScript – 單一檔案+不要混淆變數

預設在壓縮的時候會混淆變數,如果不想要可以加上 — nomunge

java -jar yuicompressor-2.4.8.jar old.js -o new.min.js --charset utf-8  -type js ---nomunge

 

壓縮CSS – 單一檔案

java -jar yuicompressor-2.4.8.jar old.css -o new.min.css --charset utf-8 --type css

 

 

再來是介紹如何把多筆JS壓縮成單一JS(CSS同理),因為YUI Compressor本身不提供這個功能,所以我們要先用copy /b  或是 type 把檔案組起來。

壓縮JavaScript – 多筆檔案壓縮成一個

::
::[合併檔案]
::
copy /B a.js+b.js+c.js all.js
::or
::type a.js b.js c.js > all.js
::
::[壓縮]
::
java -jar yuicompressor-2.4.8.jar all.js -o all.min.js --charset utf-8 --type js

壓縮CSS – 多筆檔案壓縮成一個

::
::[合併檔案]
::
copy /B a.css+b.css+c.css all.css
::or
::type a.css b.css c.css > all.css

::
::[壓縮]
::
java -jar yuicompressor-2.4.8.jar all.css -o all.min.css --charset utf-8 --type css

 

通通包在一起寫成batch

echo off
set currentFolder=%~dp0 

copy /B jquery-1.11.2.js+jquery.cookie.js  +bootstrap.js all.js
::type jquery-1.11.2.js jquery.cookie.js bootstrap.js > all.js 

java -jar %currentFolder%\yuicompressor-2.4.8.jar all.js -o all.min.js --charset utf-8 --type js 

copy /B bootstrap.css+bootstrap-theme.css all.css
::type reset.css bootstrap.css bootstrap-theme.css > all.css 

java -jar %currentFolder%\yuicompressor-2.4.8.jar all.css -o all.min.css --charset utf-8 --type css 

 

這裡我把三個JS檔案,分別是 jquery-1.11.2.js   jquery.cookie.js  bootstrap.js 壓成 all.min.js

再來把 bootstrap.css bootstrap-theme.css 壓縮成一個 all.min.css

Batch範例這裡可以下載

其他參數註記

–charset 不是必要的,但強烈建議加上

–type 不是必要的,會自動偵測

–preserve-semi 保留分號

–disable-optimizations 不要最佳化

Leave a Reply