EclipseでCSS/Javascriptを自動minimizeする方法

auto minimize css javascript in eclipse

WebサイトやWebサービスを新たに公開する際、
気を配るべきはデザイン性や機能性だけではありません。
せっかく優れたサイトであっても、表示に時間がかかってしまうと
訪れた人は待ちきれずに去ってしまうかもしれません。

サイトの表示速度を向上するためにできることはいくつかあります。

  • コンテンツのファイルサイズを小さくする
  • Webサーバのチューニング
  • プログラムのパフォーマンスチューン

etc…

中でも、意外と無駄が多いのが Javascript や CSS などのソースコード資材です。
丁寧にコメントを書き入れている場合、開発や保守の観点ではとても有用です。
しかし、サイトを訪れた人にとってはメリットがありません。
改行やインデントについても、同じことが言えます。

今回は普段Eclipseを使用されている方向けに、
CSSとJavascriptのソースコードを自動でminimize(省サイズ化)する簡単な方法を紹介します。
内容にもよりますが、Javascript/CSSのファイルサイズを20%~80%削減することができます。

この方法で実現するもの

  • ビルド時に「~.src.js」を自動minimize→ 同じフォルダに「~.js」として保存
  • ビルド時に「~.src.css」を自動minimize→ 同じフォルダに「~.css」として保存
  • それぞれファイルサイズを20%~80%削減

YUICompressorを手に入れる(無料)

この方法ではYUICompressorのminimize機能を利用します。
次の手順で手に入れて下さい。

次のURLにアクセスし、「Version 1.x.xxx(xxxは最新の値)」をクリックしダウンロードします。
http://yuilibrary.com/download/builder/(ダウンロード-ビルドツール)
Download YUI Build Tools

ダウンロードした「builder_1.x.xxx.zip」を解凍すると、「builder」というフォルダが展開されます。
少し階層が深いですが、YUICompressorはその中にあります。
builder > componentbuild > lib > yuicompressor > 【yuicompressor-2.4.2.jar】

YUICompressor 2.4.2

Eclipseで自動的にminimizeされるようにする

Eclipseのワークスペースフォルダを開き、「.yuicompressor」というフォルダを追加します。
(Windowsの場合、GUIで「.」から始まるフォルダを作成できないことがあります。その場合は「.」を省くか、コマンドプロンプトから作成してください。)
add .yuicompressor

作成したフォルダの中に、先ほど入手した「yuicompressor-2.4.2.jar」を配置して下さい。
次に、それぞれのOSに応じて、バッチスクリプトを作成・配置して下さい。

Linux / Mac OS の方はこちら【yuicompressor.sh】

1
2
3
4
5
6
#!/bin/bash
if [ -f $1 ]
then
 file=`echo $1 | sed 's/\.src//'`
 java -jar yuicompressor-2.4.2.jar $1 -o $file --charset utf-8 --nomunge
fi

Windows の方はこちら【yuicompressor.bat】

1
2
3
4
5
6
@echo off
set inputfile=%1
set outputfile=%inputfile:.src=%
if not %inputfile% == %outputfile% (
  java -jar yuicompressor-2.4.2.jar %inputfile% -o %outputfile% --charset utf-8 --nomunge
)

下図のようになっていればOKです。(Windowsの場合)
.yuicompressorフォルダの中身

最後に、プロジェクトのプロパティを設定します。
※以降はプロジェクト毎に設定する必要があります。
ツールバー「Project」>「Properties」を開きます。
Build Properties on Eclipse

「New…」をクリックすると下図のような画面が表示されるので、
「Program」を選択し「OK」をクリックして下さい。
Program を選択

以下のように設定します。
・Name: “JS_CSS_Minimize_prj1″(適当)
・Location: [Browse File System...] をクリックして先ほど作成したバッチスクリプトを選択
・Working Directory: [Browse File System...] をクリックしてバッチスクリプトがあるフォルダを選択
・Arguments: “${resource_loc}”

次に、同画面の「Refresh」タブを開き、次の2つにチェックを入れます。
・「Refresh resources upon completion.」
・「The folder containing the selected resource」
Refresh / Eclipse YUICompressor

最後に同画面の「Build Options」タブを開き、次の3つにチェックを入れます。
・「After a “Clean”」
・「During manual builds」
・「During auto builds」
Build Options / Eclipse YUICompressor

「OK」をクリックして設定完了です。

それではテストしてみます。
下図のようなサンプルプロジェクトを作ってみました。

それぞれのファイルを変更した際の自動ビルドによって、「.src」を除いた名前のファイルが作成されます。

コメントやインデントはすべて取り除かれ、ファイルサイズが小さくなりました。

あとはHTMLに、「.src」なしの「~.css / ~.js」へのリンクを入れればOKです。

以上です。
是非お試しください。

参考:

Minimizing Javascript and CSS in Eclipse / Nicolas DEBARNOT
Automagically minimize javascript in Eclipse on Windows / ten Berge ICT

Posted in: Javascript, Web