CSS / Javascript の Bunlde と Minify を WebMatrix で利用する

執筆日時： 2012年9月10日15時21分

f:id:daruyanagi:20120910054553p:plain

ほんとは OAuth を早く試してみたいのだけれど……

f:id:daruyanagi:20120910054633p:plain

残念ながらこの通りなので。NuGet Gallery にいくとこのバージョンは存在するのだけど、何がおかしいのだろうか。とりあえず報告しておいた。

Bunlde ＋ Minify ＝ Optimization

さてはて。というわけで、最後にやってみたかった CSS / Javascript の Bunlde とMinify を試してみる。

Minify はコードの可読性のためにもうけられたコメントや改行なんかを取っ払ってファイルサイズを小さくすること。

Bundle はヘルパーやパーシャルビューからメインテンプレートにリソースを登録可能にする CSS / Javascript の管理機能だと思えばいいと思う。ちいさなリソースをまとめて（Bunlde）ドバッと送信しちゃえば、多少パフォーマンスも上がるしねぇ。あと、 jQuery なんかはファイル名にバージョンナンバーが含まれていて、アップデートするたびに手動でリンクも書き換えなくちゃならないのだけど、そういう管理も少し楽になる。

bundles.Add(
new ScriptBundle("~/bundles/jquery", jqueryCdnPath)
.Include("~/Scripts/jquery-{version}.js"));

公式の Optimization ライブラリ

とはいえ、最後にしたのにはわけがあって……

f:id:daruyanagi:20120910055103p:plain

名前がコロコロ変わっているうえ、まだ v1.0 に到達していないというありさま（http://nuget.org/packages/microsoft.web.optimization）。WebMatrix からも一応（一番古いのを）使うことはできるのだけど……もう少し様子見が必要かな。今回はそのまま突っ切っちゃうけど、将来的にはこんな感じにできるんだよっていう参考程度に。 MVC 4 だったらもう使えるのかなぁ。

Microsoft.Web.Optimization

f:id:daruyanagi:20120910055942p:plain

まず、Microsoft.Web.Optimization をインストール。

# ＿AppStart.cshtml
@using Microsoft.Web.Optimization
@{
var csses = new Bundle("~/css", typeof(CssMinify)); // 仮想パス
csses.AddDirectory("~/Content/", "*.css", true); // ファイル登録
BundleTable.Bundles.Add(csses); // マネージャーに登録
var scripts = new Bundle("~/js", typeof(JsMinify));
scripts.AddDirectory("~/Scripts/", "*.js", true);
BundleTable.Bundles.Add(scripts);
}

で、 Scripts フォルダーや Content フォルダーを Bundle に登録。

<!DOCTYPE html>

@using Microsoft.Web.Optimization

<html lang="ja">
<head>
        <meta charset="utf-8" />
        <title>マイ サイトのタイトル</title>

        <link href="~/favicon.ico" rel="shortcut icon"
              type="image/x-icon" />

        // 仮想パス "~/css" として登録したバンドルを解決
        <link rel="stylesheet" type="text/css"
         href="@BundleTable.Bundles.ResolveBundleUrl("~/css")" />

        <script src="@BundleTable.Bundles.ResolveBundleUrl("~/js")">
        </script>
    </head>
<body>
<p>これはテストです。</p>
</body>
</html>

で、テンプレートで Bundle を解決。スクリプトなんかは body の最後につっこむほうがナウいかもしれない。ページの読み込みが早くなるんだってさ。

f:id:daruyanagi:20120910060245p:plain

ソースを見たらこんな感じ。 ?v=*** というのは最新版が読み込まれますように、というオマジナイだと思う。

f:id:daruyanagi:20120910060250p:plain

肝心の中身を見てみると…… CSS はちゃんと Minify されているようにみえる。

f:id:daruyanagi:20120910060252p:plain

JavaScript はなんかエラー出た。使い方が悪いのかもしれないけれど、まぁ、正式版になったらまた検証してみるって感じで。

Scripts セクションで誤魔化す

とまぁ、こんな感じなのだけれど、「ちょろっとビューからスクリプトを動的に追加したいなぁ」というだけならば、もっとお手軽な方法も使える。

# Sample.cshtml
@section Scripts
{
<link rel="stylesheet" type="text/css" href="***1" />
<link rel="stylesheet" type="text/css" href="***2" />
}

こうやって Scripts セクションを用意しておいて、

# _SiteLayout.cshtml

:
:
@RenderBody("Scripts", false)
</body>
</html>

とレイアウト側で呼び出せば OK。“スターターサイト”テンプレートで使われていたやり方をマネしてみただけだけどね！

追記

@chack411 さん曰く、 http://nuget.org/packages/Microsoft.AspNet.Web.Optimization を使うのが正しいそうです（ありがとうございます！）。また後日試してみましょう。