サイト表示の高速化のためにJSやCSSファイルを圧縮するというのはよくある手法で、ただこういうのってWebサービスとして展開しているものが数多くあるものの、JSの中身を外部のサイトに貼り付けることに抵抗があったりする場合、やっぱりローカル環境で圧縮作業ができたほうが良かったりもします。
しかも、自動化できればなおよし。
ということでYUI Compressorを使ってJSやCSSファイルを圧縮する方法のまとめです。
Linux環境でYUI Compressorを使う
まずはLinux環境で使いたい場合。
使い方は単純で、サイトからYUI Compressorのjarファイルをダウンロードし、サーバーにアップ。
あとは、下記のようにコマンドラインから対象ファイルを指定して圧縮できます。
使い方は単純で、サイトからYUI Compressorのjarファイルをダウンロードし、サーバーにアップ。
あとは、下記のようにコマンドラインから対象ファイルを指定して圧縮できます。
$ java -jar yuicompressor-2.4.8.jar jquery.js -o jquery.min.js $ ls -la jquery* -rw-rw-r-- 1 foo foo 273199 3月 24 18:01 2017 jquery.js -rw-rw-r-- 1 foo foo 105386 3月 24 18:01 2017 jquery.min.js
圧縮もとのファイル名を指定し、-oオプションで出力ファイルを指定します。
実行後は容量が減っていることがわかります。
デフォルトでは圧縮のほかに難読化もしてくれるのですが、--nomungeオプションをつけると圧縮だけしてくれるみたいです。
実行後は容量が減っていることがわかります。
デフォルトでは圧縮のほかに難読化もしてくれるのですが、--nomungeオプションをつけると圧縮だけしてくれるみたいです。
$ java -jar yuicompressor-2.4.8.jar jquery.js -o jquery.min2.js --nomunge $ ls -la jquery* -rw-rw-r-- 1 foo foo 273199 3月 24 18:01 2017 jquery.js -rw-rw-r-- 1 foo foo 105386 3月 24 18:01 2017 jquery.min.js -rw-rw-r-- 1 foo foo 144389 3月 24 18:05 2017 jquery.min2.js
難読化したほうが圧縮率は高いっぽい。
簡単にはつかるものの毎回javaコマンドを指定するのも面倒ですしJS/CSSファイルにしか適用できないため、下記のようなスクリプトを書いてパスの通ったところに配置しておけばもう少し幸せになれるかもしれません。
#!/bin/bash
if [ -f $1 ]
then
basename=${1##*/}
ext=${basename##*.}
if [ $ext = "css" -o $ext = "js" ]; then
file=${basename%.*}".min."$ext
java -jar yuicompressor-2.4.8.jar $1 -o $file --charset utf-8
fi
fi
対象ファイルを指定するだけで、「.min.js」などのファイルを作ってくれます。
$ yuicompressor jquery.js
Windows環境でYUI Compressorを使う
開発環境がWindowsの場合でもLinux環境と同様にコマンドラインから使えます。
さっきのjarファイルをWindows上の適当な場所に保存し、bashスクリプトのWindowsバッチへの焼き直しではあるのですが、
さっきのjarファイルをWindows上の適当な場所に保存し、bashスクリプトのWindowsバッチへの焼き直しではあるのですが、
@echo off echo compress %1%... set ext=%~x1 set ext_flg=true if not "%ext%"==".css" if not "%ext%"==".js" set ext_flg=false if %ext_flg%==true ( java -jar yuicompressor-2.4.8.jar %1 -o %~p1%~n1.min%ext% --charset utf-8 )
みたいなバッチを書けばコマンドラインから実行できます。
後述する自動化のために多少制御は変えてはいますが、Windowsバッチとかあんま作ったこと無いんで細かい制御を組み込むのは勘弁してください。
これで楽にファイル圧縮ができるわけですけど自分の場合、開発にEclipseを使っているのでEclipse経由でYUI Compressorが使えれば理想です。
実は、YUI CompressorはEclipseのプラグインとしても提供されているので、簡単に組み込むことができます。
Eclipseのマーケットプレース経由でプラグインを導入することができるのですが、ヘルプメニュー内にElipseマーケットプレースが存在しない場合、まずはそのクライアントをインストールする必要があります。
方法は、ヘルプメニューから「新規ソフトウェアのインストール」を選択し、作業対象（サイト）から使っているElipseのダウンロードサイトを指定、フィルタに「Marketplace client」と入力して探します。
方法は、ヘルプメニューから「新規ソフトウェアのインストール」を選択し、作業対象（サイト）から使っているElipseのダウンロードサイトを指定、フィルタに「Marketplace client」と入力して探します。
あとは、選択してインストール。
インストールが完了したらヘルプメニュー内に「Eclipse マーケットプレース」メニューが表示されていますので、選択して起動します。
あとは、検索ボックスに「YUI Compressor」と入力して探し、インストールを実行。
あとは、検索ボックスに「YUI Compressor」と入力して探し、インストールを実行。
インストールが完了したら、圧縮したファイルを右クリックし「外部ツール」から個別に圧縮できます。
実行すると、圧縮後のファイル名が指定できるので指定すれば圧縮が実行されます。
これでも十分使えるわけですけど、さらにファイルをビルドしたら自動的に圧縮されたらさらに幸せです。
自動化の準備として、先ほど作成したWindowsバッチおよびjarファイルを適当なフォルダに保存しておきます（jarファイルはパスが通っていたらどこでもいいんでしょうけど）。
例えば、下記。
自動化の準備として、先ほど作成したWindowsバッチおよびjarファイルを適当なフォルダに保存しておきます（jarファイルはパスが通っていたらどこでもいいんでしょうけど）。
例えば、下記。
C:\workspace\yuicompressor
次に、Eclipse上のプロジェクトごとに設定が必要なのですが、対象のプロジェクトを右クリックして「プロパティ」を選択します。
この中で、「ビルダー」の項目を選択して、「新規」→「プログラム」を選択します。
名前は、適当なビルダー名を、ロケーションには作成したWindowsバッチのパスを、作業ディレクトリはバッチが保存されているディレクトリを、引数には「変数」ボタンから${resource_loc}を選択します。
この中で、「ビルダー」の項目を選択して、「新規」→「プログラム」を選択します。
名前は、適当なビルダー名を、ロケーションには作成したWindowsバッチのパスを、作業ディレクトリはバッチが保存されているディレクトリを、引数には「変数」ボタンから${resource_loc}を選択します。
次に、「リフレッシュ」のタブを開き「完了時にリソースをリフレッシュ」にチェックを入れ、「選択されたりソース」を選択します。
次に「ビルドオプション」のタブを開き「「クリーン」の後」「手動ビルド中」「手動ビルド中」にチェックを入れておきます。
これで、設定は完了です。
あとは、ファイルを編集して保存した際に自動的にバッチが実行されます。
あとは、ファイルを編集して保存した際に自動的にバッチが実行されます。
実行時にはコンソールに結果が出力されるので対象ファイルなどを確認できます。
実行後は圧縮ファイルが自動保存されるはずですが、Eclipse上のエクスプローラには直ぐに反映されないのでリフレッシュしてみればよいかもしれません。
これで、JS/CSSファイルを編集した際に圧縮を忘れるということはなくなりそうですね。
これで、JS/CSSファイルを編集した際に圧縮を忘れるということはなくなりそうですね。
もちろん、圧縮してくれるWebサービスも数多くありますし、最近ではGruntなんかを使うのも流行っているようですので環境に合わせて取捨選択してみればよいかもしれません。