【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){ ...

すてき.