“Minify” – Alphabetical Advent Calendar 2013

2013年12月12日 10:31 （2013年12月12日 14:44 更新）

この記事は賞味期限切れです。（更新から1年が経過しています）

“M” は minify の “M”。

Minify

minify は、リソースを圧縮してサイズを小さくするプロセスの事です。 JavaScript のファイルで偶に jquery.min.js のように接尾辞 min をつけている事があると思いますが、これはおそらく minified という事でしょう。

Webコンテンツはネットワークからリソースをダウンロードして動くので、それらの軽量化は重要な課題の一つです。特に JavaScript と CSS のミニファイツールは広く出回っていて導入も簡単です。

uglify + mincss

まずは Grunt から公式にプラグインが提供されている UglifyJS と Cssmin を使ってみましょう。

UglifyJS

https://github.com/gruntjs/grunt-contrib-uglify

UglifyJS は JavaScript で実装された JavaScript の圧縮ツールです。コマンドラインで圧縮する場合は npm で uglify-js をインストールし、uglifyjs コマンドを使用します。 Grunt で使用する場合は、 grunt-contrib-uglify をインストールします。

ここでは、Grunt でのシンプルな例を挙げてみます。（Grunt の基本的な部分はここでは省きます）

uglify: {
    dist: {
        options: { ... },
        files: {
            "js/hoge.min.js": "js/hoge.js",
            "js/foo.min.js": ["js/foo.js", "js/bar.js", "js/baz.js"]
        }
    }
}

options では圧縮のレベルなど、非常に多くの項目の設定が可能です。 files オブジェクトのキーに出力先のファイル名を指定し、値にソースとなるファイル（群）を指定します。複数ファイルをまとめて圧縮したい場合は、配列で指定する事ができます。

上の例では、 “js/hoge.js” の圧縮結果が “js/hoge.min.js” に保存され、 “js/foo.js” + “js/bar.js” + “js/baz.js” を圧縮した結果が “js/foo.min.js” として保存されます。

Cssmin

https://github.com/gruntjs/grunt-contrib-cssmin

Cssmin は CSSファイルを圧縮する為の Grunt タスクです。 Grunt タスクの多くがそうであるように、基本的な使い方はあまりかわりません。

cssmin: {
    dist: {
        options: { ... },
        files: {
            "css/hoge.min.css": "css/hoge.css",
            "css/foo.min.css": ["css/foo.css", "css/bar.css", "css/baz.css"]
        }
    }
}

単純にファイルを指定する方法の他に、「指定したディレクトリ内のCSSファイルを全て圧縮して “*.min.css” として保存する」 なんていうことも設定次第では出来ます。 Grunt は素晴らしいですね。

その他のミニファイツール

YUI Compressor

http://yui.github.io/yuicompressor

Yahooが提供する、非常に古くからある Java で書かれた JavaScript / CSS 共に圧縮可能なミニファイツールです。ダウンロードした jar ファイルを java コマンドで実行して使います。設定できるオプション項目は、あまり多くはありません。

$ java -jar /the/path/to/yuicompressor.x.x.x.jar foo.js -o foo.min.js

基本的な使い方は上の通りで、”foo.js” を圧縮した結果を “foo.min.js” に保存します。毎回 jar ファイルを指定するのは面倒なので、Linux / Mac 環境ならば alias を設定したり、 Wndows 環境なら bat ファイルを作成するなどしましょう。

$ alias yuicompressor='java -jar /the/path/to/yuicompressor.x.x.x.jar'

Google Closure Compiler

https://developers.google.com/closure/

Google Closure Compiler は Google が提供する JavaScript 用のミニファイツールです。コマンドラインで使用できる他、サービスAPIやオンラインでのテストツールも用意しています。

コマンドラインでは YUI Compressor 同様に Java コマンドで実行します。

$ java -jar /the/path/to/compiler.jar --js foo.js --js_output_file foo.min.js

Google Closure Compiler には多くのオプションが用意されていますが、中でも重要なのが圧縮のレベルを3つのモードから選択する –compilation_level です。

WHITESPACE_ONLY
改行や不要なスペース等を除去するだけの、もっとも簡易なモード
SIMPLE_OPTIMIZATIONS
WHITESPACE_ONLY モードに加えて、ローカル変数や関数等のリネームによる短縮を行います。
これが初期値です。
ADVANCED_OPTIMIZATIONS
SIMPLE_OPTIMIZATIONS に加えて、グローバルな変数・関数のリネームを行ったり、
恐らく不要であると思われるコードを除去したりする、非常にアグレッシブなモードです。
その為のルールに則った書き方をしなければなりません。

cf) Closure Compiler Compilation Levels – Closure Tools — Google Developers

参考資料

コメントを書く