小粋空間  -  a cheap joke and a play on words site

YUI Compressor で JavaScript ファイルを圧縮する

YUI Compressor の使用方法を紹介します。

YUI（Yahoo! UI Library） Compressor は、JavaScript ソースコードの圧縮アプリケーションで、バージョン2.0 からは CSS の圧縮も可能になっています。

ダウンロードした Windows 用のバージョンではコマンドラインからの実行のみ有効です。コマンドラインから実行するには Java の実行環境が必要なので、Java の設定方法もひっくるめて紹介します。

なお、当ブログではこれまで複数の JavaScript ファイルを読み込んでいましたが、HTTP リクエスト回数を削減するため、ひとつのファイルにまとめ、さらに YUI Compressor で圧縮してみました。

１．JRE 6 Update 7 のダウンロード

JRE（Java Runtime Environment）は Java プログラムを実行するためのソフトウェアです。

Java の公式サイト の「Javaソフトウェアの無料ダウンロード（JRE）」または「ダウンロードはこちらから」をクリック。

左サイドバーの「Java のダウンロード一覧」をクリック。

Windows の場合、「Windows XP/Vista/2000/2003 オンライン」または「Windows XP/Vista/2000/2003 オフライン」をクリック。

クリックするとファイルのダウンロード画面になるので、任意のフォルダにダウンロードします。

２．JRE 6 Update 7 のインストール

ダウンロードした jre-6u7-windows-i586-p-iftw.exe をダブルクリック。セットアップウィザードが開始するので、「同意する」をクリック。

インストールが開始します。

「完了」をクリック。

これで JRE がインストールされました。デフォルトでは C ドライブの Program Files\jre1.6.0_07 にインストールされます。

３．パスの設定

コマンドプロンプトから Java コマンドが簡単に実行できるようにします。この作業はスキップしても構いませんが、設定しておいた方が後の作業が楽になります。

マイコンピュータを右クリックして「プロパティ」を選択し、開いた画面の詳細設定タブをクリックして、「環境変数」をクリック。

システム環境変数の Path をクリックして「編集」をクリック。

「変数値」の最後に以下の内容を追加して、「OK」をクリックします。

;C:¥Program Files¥Java¥jre1.6.0_07¥bin

先頭のセミコロンは、設定済の値との区切り文字になるので、必ず付与してください。また、jre1.6.0_07 というフォルダを他の名称に変更している場合は、フォルダ名を適宜修正してください。

残りの画面も順次「OK」をクリックして閉じてください。

４．YUI Compressor のダウンロード・インストール

Yahoo! UI Library: YUI Compressor の Download をクリック。

「Download YUI Compressor version 2.3.6」をクリック（バージョンは2008年8月現在）。

クリックするとダウンロードが開始されるので、任意のフォルダにダウンロードし、展開してください。

５．JavaScript ファイル・CSS ファイルの用意

圧縮したい JavaScript ファイルまたは CSS ファイルを、YUI Compressor を展開したフォルダの build フォルダに配置します（パスの設定方法が分かっていれば配置場所はどこでも構いません）。

ここでは、圧縮前のJavaScript ファイル名を hogehoege.js として配置します。

６．YUI Compressor の実行

「スタート」→「プログラム」→「アクセサリ」→「コマンドプロンプト」を開き、YUI Compressor を展開したフォルダ（ここでは yuicompressor-2.3.6）に移動し、さらにその配下のbuild フォルダに移動します。コマンドプロンプトは３項の設定が終わってから起動したものを利用してください（３項以前に起動したコマンドプロンプトは３項の設定が反映されません）。

コマンドプロンプトで次のコマンドを実行します。

java -jar yuicompressor-2.3.6.jar -o hogehoge-min.js hogehoge.js

-o の後に出力ファイル名を設定します。hogehoge.js が入力する（圧縮前の）JavaScript ファイル名です。

JavaScript ファイル内に日本語を使っている場合は、入力ファイルの文字コードを指定してください。UTF-8 の場合は次のようにします。

java -jar yuicompressor-2.3.6.jar --charset UTF-8 -o hogehoge-min.js hogehoge.js

文字コードを指定しないとエラーになる可能性があります。

正常に終了すればコマンドプロンプトには何も表示されずに終了します。

出力ファイルを任意のエディタで開き、圧縮されていることを確認してください。複数の JavaScript ファイルをひとつにまとめる機能はないようですので、予めひとつのファイルにしてから、YUI Compressor を実行してください。

コマンドラインのオプションはインストールした YUI Compressor の doc¥README に解説があります。