【ASP.NET MVC】BundleConfigで読み込むCSSやJSのファイル名に文字列を追加する方法

time 2019/01/12

今回は「ASP.NET MVC」のバンドルに関するお話です。
キャッシュ回避のため、CSSファイルやJSファイルの後ろに「?ver=1.0.0」のようにバージョン名を書くことがありますよね。
ASP.NET MVCではBundleConfigでバンドルの設定を行うので、ここでファイル名後ろに文字列を追加する方法をご紹介します。

先に結論を書くと、「BundleクラスにIBundleTransformを実装したクラスを設定する」で実現できます！

1 環境
2 手順
- 2.1 IBundleTransformの実装クラス作成
- 2.2 BundleConfig内で指定

環境

・ASP.NET MVC
5.2.4

手順

IBundleTransformの実装クラス作成

IBundleTransformインタフェースを実装したクラスを用意します。
response.Filesをforeachで回し、IncludedVirtualPathの後ろに文字列をくっ付けます。

using System.Web.Optimization;

namespace AzarashiSample01.App_Start
{
    public class CustomBundleTransform : IBundleTransform
    {
        private string suffix;

        public CustomBundleTransform(string suffix)
        {
            this.suffix = suffix;
        }

        public void Process(BundleContext context, BundleResponse response)
        {
            foreach (var file in response.Files) {
                file.IncludedVirtualPath = file.IncludedVirtualPath + $"?ver={suffix}";
            }
        }
    }
}

追加する文字列はコンストラクタで自由に設定できるようにしましたが、実用性を考えるとアセンブリバージョンあたりを付けると良いかと思います。
その場合はAssembly.GetExecutingAssembly().GetName().Version.ToString()という感じで指定してみてください。

BundleConfig内で指定

BundleConfig内でBundleクラスのTransformsプロパティにIBundleTransformインタフェースの実装クラスを設定します。
例としてサンプルで読み込んでいるCSSファイルに設定してみました。

using AzarashiSample01.App_Start;
using System.Web;
using System.Web.Optimization;

namespace AzarashiSample01
{
    public class BundleConfig
    {
        // バンドルの詳細については、https://go.microsoft.com/fwlink/?LinkId=301862 を参照してください
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            // 開発と学習には、Modernizr の開発バージョンを使用します。次に、実稼働の準備が
            // 運用の準備が完了したら、https://modernizr.com のビルド ツールを使用し、必要なテストのみを選択します。
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js"));

            StyleBundle styleBundle = new StyleBundle("~/Content/css");
            styleBundle.Include("~/Content/bootstrap.css", "~/Content/site.css");
            styleBundle.Transforms.Add(new CustomBundleTransform("azarashi"));
            bundles.Add(styleBundle);
        }
    }
}

ブラウザの開発者ツールでファイル名を確認してみます。