WebMatrix 2 で JavaScript や CSS を最小化する方法

  • Article

今回は、WebMatrix 2 で JavaScript や CSS の最小化 (Minify) 機能を使う方法をご紹介します。

WebMatrix 2 では、以前のブログポスト “WebMatrix 2 新機能 ～ OSC 2012 Hokkaido セッション フォローアップ (その１) ～” でご紹介した通り、拡張機能ギャラリーから OrangeBits Compiler をインストールすることで、CoffeeScript や LESS, SASS などの言語を使用することができます。

image

加えて、この OrangeBits Compiler の最新版では、JavaScript や CSS の最小化（改行やスペース、コメントの削除）を行うことができます。

image

JavaScript ファイルを右クリックすると表示される “Minify” メニューをクリックすると、すぐに *.min.js ファイルが生成されます。

image

◆ 最小化前 “MyScript.js”

    1: // Show message with animation.
    2: var duration = 1000;
    3: $(function() {
    4:     $('#msg1').slideDown(duration, function() {
    5:         $('#msg2').slideDown(duration);
    6:     });
    7: });

◆ 最小化後 “MyScript.min.js”

 var duration=1000;$(function(){$("#msg1").slideDown(duration,function(){$("#msg2").slideDown(duration)})});

パラメータ名などの置き換え (duration → d など) までは行ってくれませんが、コメントと改行、スペースが削除されていることが分かります。クライアント側で JavaScript や CSS をロードする際のペイロード削減に有効ですので、ご活用ください。

また、OrangeBits Compiler のオプションでは、自動で最小化をおこなう設定もあります。この設定をチェックしておくと、JavaScript を編集して保存したタイミングで自動で *.min.js ファイルを生成することができます。

image

とてもお手軽に使用できる WebMatrix 2 は、Web サイト作成では本当に手放せません。この夏休み・お盆休みに、WebMatrix を使って Web サイトを作成してみませんか？ スマイル