YUI Compressor使用配置方法 JS/CSS壓縮工具

WindySky 2016-03-07

展開全文

YUI Compressor 是一個(gè)用來壓縮 JS 和 CSS 文件的工具,，采用Java開發(fā)。

YUI Compressor下載地址：http://www.jb51.net/softs/25860.html

使用方法：

//壓縮JS
java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -v src.js > packed.js
//壓縮CSS
java -jar yuicompressor-2.4.2.jar --type css --charset utf-8 -v src.css > packed.css

YUI Compressor v2.4.2

安裝指南
=========

JDK環(huán)境變量配置的步驟如下：

1.我的電腦-->屬性-->高級(jí)-->環(huán)境變量.

2.配置用戶變量:
　　　　　　　　a.新建 JAVA_HOME
　　　　　　　　　　 C:\Program Files\Java\j2sdk1.5.0 （JDK的安裝路徑）
　　　　　　　　b.新建 PATH
　　　　　　　　　　　 ;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin　　　　　　　　
c.新建 CLASSPATH
　　　　　　　　　　　%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar

3.測(cè)試環(huán)境變量配置是否成功：

　　　開始-->運(yùn)行--〉CMD
　　　鍵盤敲入： JAVAC
　　　　　　　　出現(xiàn)相應(yīng)的命令,，而不是出錯(cuò)信息,，即表示配置成功！

先下載jdk：http://www.jb51.net/softs/60807.html

需要安裝 JDK >= 1.4, 并設(shè)置環(huán)境變量 JAVA_HOME

桌面 -> 我的電腦 -> 右鍵 -> 屬性 -> 高級(jí) -> 環(huán)境變量

系統(tǒng)變量新建

安裝步驟：

1. 安裝請(qǐng)點(diǎn)擊 install.cmd
2. 卸載請(qǐng)點(diǎn)擊 uninstall.cmd
3. 如果安裝過之前的版本,，請(qǐng)先卸載老版本

壓縮測(cè)試：

選中 test.js, 執(zhí)行右鍵菜單“Process with &YUICompressor”,，會(huì)生成 test-min.js.

注意事項(xiàng)：

1. 需要安裝 JDK >= 1.4, 并設(shè)置環(huán)境變量 JAVA_HOME
2. css 和 js 文件編碼必須是 GB2312, GBK 或 GB18030. 如果要支持 UTF-8, 請(qǐng)?jiān)?compressor.cmd 中將 GB18030 替換為 UTF-8
3. css 文件中含有中文時(shí)，如果 css 編碼和頁(yè)面編碼不一致,，需要手動(dòng)將中文替換為\xxxx, 詳細(xì)說明請(qǐng)參考 compressor.cmd 中的說明
4. 如果不需要 native2ascii, 可以只安裝 JRE （需要手動(dòng)修改下 compressor.cmd）

Ref:

1. Introducing the YUI Compressor: http://www./blog/2007/08/11/
2. YUILibrary: http:///projects/yuicompressor/wiki
3. Documentation: http://developer.yahoo.com/yui/compressor/
4. native2ascii.exe: http://java./j2se/1.4.2/docs/tooldocs/windows/native2ascii.html

以下是配置補(bǔ)充：

使用YUI Compressor壓縮JS和Css

常用示例（在cmd中執(zhí)行）

java -jar D:\yuicompressor-2.4.6\build\yuicompressor-2.4.6.jar --type js --charset UTF-8 D:\my.js -o D:\my-min.js
java -jar D:\yuicompressor-2.4.6\build\yuicompressor-2.4.6.jar --type css --charset UTF-8 D:\my.css -o D:\my-min.css

–type指定要打包的文件類型,，可選的有 js和css
–charset 指定字符集
-o 指定輸出的文件名，如果不指定這個(gè)參數(shù)將會(huì)把壓縮后的內(nèi)容輸出到命令行上
最后的my.js和my.css是要打包的debug版源文件

如果沒有給定charset參數(shù),，則字符集默認(rèn)是系統(tǒng)的,，此處指定了UTF-8，更加你的實(shí)際需要修改,。具體語法和其他參數(shù)參考：http://www./yuicompressor/

使用YUI Compressor和DOS批處理腳本壓縮JavaScript和CSS,，加上IIS的GZIP，加起來能得到85%左右的壓縮率,。（其中YUI Compressor的壓縮率大約為50%）也可以修改參數(shù)獲得更多的壓縮率,。

---------------------------------------------華麗分割線---------------------------------------

制作批處理工具

三個(gè)文件：
批處理文件：yuicompressor.bat
注冊(cè)表文件：yuicompressor.reg
壓縮jar包：yuicompressor-2.4.6.jar

文件目錄：D:\server\f2etools\yuicompressor

yuicompressor.bat批處理使用方法：
對(duì)整個(gè)文件夾右鍵點(diǎn)擊【YUI-Compressor JS/CSS】批量壓縮操作生成-min.css或-min.js,源文件不變，項(xiàng)目平時(shí)開發(fā)時(shí)引用源文件,，上線前引用壓縮文件測(cè)試正常后再上線,。

yuicompressor.bat批處理文件代碼：

復(fù)制代碼

代碼如下:

cd "%1"
for /f %%a in ('dir /b *-min.js') do call:ProcessDel: %%a
for /f %%a in ('dir /b *-min.css') do call:ProcessDel: %%a
for /f %%a in ('dir /b *.js') do call:ProcessCompress: %%a
for /f %%a in ('dir /b *.css') do call:ProcessCompress: %%a
:ProcessDel
IF NOT [%1]==[] call:DeleteMinFiles: %1
GOTO:EOF
:ProcessCompress
IF NOT [%1]==[] call:CompressFiles: %1
GOTO:EOF
:DeleteMinFiles
IF EXIST "%CD%\%1" del "%CD%\%1"
GOTO:EOF
:CompressFiles
java -jar D:\server\f2etools\yuicompressor\yuicompressor-2.4.6.jar %1 -o %~n1-min%~x1
GOTO:EOF

yuicompressor.reg注冊(cè)表功能：選中文件夾后，右鍵,，會(huì)多一個(gè)選項(xiàng)【YUI-Compressor JS/CSS】
yuicompressor.reg注冊(cè)表文件代碼：

復(fù)制代碼

代碼如下:

Windows Registry Editor Version 5.00
[HKEY_CLASSES_ROOT\Directory\shell\Compress JS/CSS Files]
@="YUI-Compressor JS/CSS"
[HKEY_CLASSES_ROOT\Directory\shell\Compress JS/CSS Files\command]
@="D:\\server\\f2etools\\yuicompressor\\yuicompressor.bat %1"

注意事項(xiàng)：請(qǐng)修改兩個(gè)文件中的目錄路徑
批處理文件：yuicompressor.bat和注冊(cè)表文件：yuicompressor.reg

---------------------------------------------華麗分割線---------------------------------------

打包壓縮pack-all-min.js

文件如下：
批處理文件：pack-js.bat
需要打包的目錄文件：pack-list.txt

pack-js.bat 代碼：

復(fù)制代碼

代碼如下:

for /f %%i in (packList.txt) do type %%i >> pack-all.js
java -jar D:\server\f2etools\yuicompressor\yuicompressor-2.4.6.jar --type js --charset utf-8 pack-all.js -o pack-all-min.js

pack-list.txt

jquery.ui.datepicker.js
jquery.ui.dialog.js
jquery.ui.draggable.js
jquery.ui.mouse.js

使用方法：
在當(dāng)前js文件夾里放入這兩個(gè)文件,，平時(shí)開發(fā)用多個(gè)源文件，運(yùn)行pack-js.bat后查看頁(yè)面效果,，上線前打包成一個(gè)壓縮文件,，測(cè)試無誤后再上線。

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,，所有內(nèi)容均由用戶發(fā)布,，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式,、誘導(dǎo)購(gòu)買等信息,，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,，請(qǐng)點(diǎn)擊一鍵舉報(bào),。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自： WindySky > 《前端技術(shù)》

舉報(bào)/認(rèn)領(lǐng)