ASP.NET Core における css と js ファイルの Bundle と Minify

2017/11/03

ASP.NET Core における css と js ファイルの Bundle と Minify

2017/11/03 0:42 ASP.NET Core

ASP.NET Core で、site.css を変更したのに site.min.css に変更が反映されずちょっとはまったので調べてみました。
結論としては、BundlerMinifier がインストールされていませんでした。

Bundle と Minify については以下のページで解説されています。

https://docs.microsoft.com/en-us/aspnet/core/client-side/bundling-and-minification

環境

Visual Studio 2017
ASP.NET Core 2.0

ASP.NET Core における CSS と js ファイルの圧縮

ASP.NET Core のテンプレートプロジェクトでは、基本的に JavaScript は wwwroot/js/site.js に、スタイルシートは wwwroot/css/site.css にコードを追加していきます（もちろん自分でファイルを追加することもできます）。

追加したコードやファイルはビルド時に縮小（Minify）され、それぞれ wwwroot/js/site.min.js wwwroot/css/site.min.css というファイルに統合（Bundle）されます。
この Bundle と Minify の作成ルールは、bundleconfig.json に記載されています。

尚、ASP.NET Core 2.0 のテンプレートプロジェクトだと、これらは全て設定済みの状態です。
なので、プロジェクトの発行を行ったときにも、site.min.js site.min.css は自動で作成されるものだと思っていました。
というかそんな感じで Microsoft のページでも説明されていますし、Visual Studio で bundleconfig.json を開いたときに特に拡張機能のインストールなども促されなかったですし。

しかし、私の場合、実際にはプロジェクトの発行時に site.min.js site.min.css が作成されず、調べたところ BundlerMinifier がインストールされていないことがわかりました。

というわけで、NuGet で BundlerMinifier をインストールすると、site.min.js site.min.css が作成されるようになりました。

BundlerMinifier のインストール

[パッケージマネージャーコンソール] から以下のコマンドを入力します。

PM> Install-Package BuildBundlerMinifier

インストールが完了した時点で、site.min.js site.min.css が自動的に更新されました。

へっぽこプログラマーの備忘録

2017/11/03