ASP.NET Core 3.1 MVC で .css ファイルと .js ファイルをバンドル&ミニファイする機能を実装しようとしてハマった話を書きます。
手順は Microsoft のドキュメント Bundle and minify static assets in ASP.NET Core に詳しく書いてあります。
2022/5/31 追記: いつの間にか上に紹介した Microsoft ドキュメントからは以下に書いた手順は削除されていますが、Visual Studio 2022 で作った .NET 6.0 プロジェクトでも有効なのは確認しました。
ドキュメントにはいろいろ書いてありますが、ビルド時にバンドル&ミニファイ版の .css ファイル、.js ファイルを生成するなら下の (1), (2) の手順だけで可能です。
(1) Configure bundling and minification のセクションに従ってアプリケーションルートに bundleconfig.json を追加。以下にドキュメントに記載されている例を書いておきます。詳しい説明はドキュメントを読んでください。
[
{
"outputFileName": "wwwroot/css/site.min.css",
"inputFiles": [
"wwwroot/css/site.css"
]
},
{
"outputFileName": "wwwroot/js/site.min.js",
"inputFiles": [
"wwwroot/js/site.js"
],
"minify": {
"enabled": true,
"renameLocals": true
},
"sourceMap": false
}
]
(2) Build-time execution of bundling and minification のセクションに従って BuildBundlerMinifier を NuGet からインストール。(BundlerMinifier.Core ではないので注意)
ここまでの設定で、Visual Studio でプロジェクトをビルドする時、bundleconfig.json の inputFiles に指定した .css, .js ファイルをバンドル&ミニファイして outputFileName に指定したパス/ファイル名で配置してくれます。一番上の画像の赤枠で囲ったファイルを見てください。
Visual Studio が自動的にやってくれるのはここまでであることに注意してください。
一番上の画像のようにバンドル&ミニファイ版のファイルを作って配置してくれるだけなので、例えば元のソースが以下のように通常版のパスを参照している場合は site.css ⇒ site.min.css、site.js ⇒ site.min.js に書き換える必要があります。ちなみに、テンプレートで自動生成される _Layput.cshtml がデフォルトで下記のようになっています。
<link rel="stylesheet" href="~/css/site.css" />
<script src="~/js/site.js"></script>
ここが Microsoft のドキュメントに書いてなくて、何故記事の通りやっているのにバンドル&ミニファイされないのか分からず、半日ぐらいハマってしまったところです。(汗)
そんなの当たり前に分かるだろうと思われるかもしれませんね。でも、.NET Framework MVC の場合は、テンプレートでプロジェクトを自動生成するだけで、web.config で <compilation debug="true" ... > と設定してある時は通常版の .css と .js ファイルが、debug="false" の時はバンドル&ミニファイ版が自動的に設定されるのです。
自分は Core MVC でも .NET Framework MVC と同様に、そこまで面倒見てくれると思い込んでいたので気が付きませんでした。(涙)