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

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

Posted at August 25,2008 1:03 AM
Tag:[JavaScript, YUI]

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

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

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

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

1.JRE 6 Update 7 のダウンロード

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

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

Java の公式サイト

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

Java のダウンロード一覧

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

Windows 版のダウンロード

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

2.JRE 6 Update 7 のインストール

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

セットアップウィザード

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

インストールが開始

「完了」をクリック。

インストール完了

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

3.パスの設定

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

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

詳細設定タブ

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

システム環境変数

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

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

「変数値」の編集

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

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

4.YUI Compressor のダウンロード・インストール


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

Yahoo! UI Library: YUI Compressor

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

「Download YUI Compressor version 2.3.6」をクリック

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

5.JavaScript ファイル・CSS ファイルの用意

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

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

6.YUI Compressor の実行

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

YUI Compressor を展開したフォルダ

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

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 に解説があります。

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

YUI Compressor ダイヤログでファイル指定 from ウチミパソコン家庭教師
JavaScriptでの開発案件があり、「YUI Compressor」でソース圧縮しました。 吐き出されたコードを見るとシンプルに整形圧縮してあり、好... [続きを読む]

Tracked on July 23, 2009 5:09 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)