ASP.NET MVCでスクリプトをBundleしたりMinifyしたりする

ASP.NET MVC では webpack を使わなくてもスクリプトをバンドルできます。
各画面にソースのパスを書くのは面倒なので BundleConfig でまとめてみます。

Microsoft.AspNet.Web.Optimization の取得

Microsoft.AspNet.Web.Optimization を NuGet から取得します。

BundleConfig の作成

App_Start フォルダに BundleConfig.cs を追加します。

using System.Web.Optimization;

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
            "~/Scripts/jquery-{version}.js"));    
        bundles.Add(new ScriptBundle("~/scripts/hoge").Include(
            "~/Scripts/Sample/hoge.js",
            "~/Scripts/Sample/fuga.js",
            "~/Scripts/Sample/piyo.js"));
    }
}

BundleConfig を Global.asax へ登録する

Global.asax.cs で BundleConfig を呼び出すようにします。

using System.Web.Optimization;

public class Global : HttpApplication
{
    void Application_Start(object sender, EventArgs e)
    {
        BundleConfig.RegisterBundles(BundleTable.Bundles);
    }
}

画面から Bundle を呼び出す

あとは画面で呼び出すだけです。

@using System.Web.Optimization

<head>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/hoge")
</head>

結果

<head>
    <script src="/map/scripts/jquery?v=WvOgJns1M1ZZkySVvxnR5qZTgNQ_UWnAsm21lcWbuMs1"></script>
    <script src="/map/scripts/hoge?v=fsiac-cyztW0v5rUgi-a9vvPTsOHXerrhW6x3w1IiHw1"></script>
</head>

ソースのパスを BundleConfig にまとめることが出来ました。
また、BundleConfig で {version} と指定することでライブラリのバージョンを更新しても気にする必要がなくなりました。
更に、結果のソースを見てみると minify されていることが分かります。

var hoge=function(){function n(){}return n.prototype.JsonToDocType=function(n){ ...