TopサービスYahoo > 2008年8月
2008年8月25日

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

August 25,2008 1:03 AM
Tag:[, ]
Permalink

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

Comments [0] | Trackbacks [1]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3