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


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

WebMatrix 2 では、以前のブログポスト “WebMatrix 2 新機能 ~ OSC 2012 Hokkaido セッション フォローアップ (その1) ~” でご紹介した通り、拡張機能ギャラリーから OrangeBits Compiler をインストールすることで、CoffeeScriptLESS, 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 サイトを作成してみませんか? スマイル

Comments (0)

Skip to main content