ASP.NET Coreでプロジェクト内のcssやjsファイルをminifyする

クライアントにコンテンツを提供する際に、bootstrapなどのcssフレームワークやjQueryなどのjsフレームワークなども一緒に送るわけですが、そのサイズは小さければ小さいほど良いことは言うまでもありません。

そこで一般的には機能的に不要な空白やインデント、改行といった空白文字を削除して最小化（minify）したcss、jsファイルを使用します。

minifyする様々なツールがある（はず。調べていない）ので、それを使ってminifyしたファイルを使ったり、すでにminify済みのcssやjsも提供されているのでそれを使ったりします。

けれども、それだけでなく自前で用意したcssやjsもあるわけで、それらをminifyしたら編集が難しくなるので、提供するときだけminifyしたいところです。

BuildBundlerMinifierをNuGetでインストールすると便利です。

このライブラリは毎回ビルドするたびにプロジェクト内のcssやjsをminifyしてくれます。

なので、minifyすることを意識せずともminifyされたファイルが常に最新に保たれます。

NuGetからインストールする

検索欄にbuildbundlerminifierと入力し、検索結果からBuildBundlerMinifierをインストールします。

これで以後、ビルドが走るたびにminifyされ、{元ファイル名}.min.jsというファイルが作成されます。

設定ファイル

docs.microsoft.com

minifyの対象となるファイルはどこで設定されているのか、というと、プロジェクト内にbundlerconfig.jsonというファイルを作成し、そこに記述しておきます。

bundlerconfig.jsonは以下のようにとてもシンプルな作りになっています。

minify対象のファイルが増えた場合は、このbundlerconfig.jsonファイルに同じように書くだけでよいです。

[
  {
    "outputFileName": "wwwroot/css/site.min.css",
    "inputFiles": [
      "wwwroot/css/site.css"
    ]
  },
  {
    "outputFileName": "wwwroot/lib/bootstrap/css/bootstrap.min.css",
    "inputFiles": [
      "wwwroot/lib/bootstrap/css/bootstrap.css"
    ]
  },
  {
    "outputFileName": "wwwroot/js/CustomScript.min.js",
    "inputFiles": [
      "wwwroot/js/CustomScript.js"
    ]
  }
]