ゴマちゃんフロンティア

アザラシが大好きな山梨県産SEの開発日記です

【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を実装したクラスを設定する」で実現できます!

環境

・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);
        }
    }
}

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

実際のところ、固定値で「azarashi」とか入れたらキャッシュ回避として意味がないので、素直にバージョンを付けることをおすすめします。

down

コメントする



ツイッター

このブログを書いている人

りべるん

りべるん

アザラシが大好きな山梨県産Webエンジニア。2019年3月よりフリーランスSEとして東京で活動中。自称「Web業界のアザラシ」 [詳細]