ASP.NET Coreで、bowerじゃなくてnpmから取得したパッケージをwwwrootに入れたい

  • 2
    いいね
  • 0
    コメント

ASP.NET Core Advent Calendar7日目になります。
http://qiita.com/advent-calendar/2016/asp-net

標準のASP.NET Core MVCのテンプレートを使うとbootstrap等のJSパッケージはbowerで取得するように作られています。
これをnpmから取得するように変更します。

環境

  • Visual Studio 2015 Update3
  • Node 7.2.0
  • ASP.NET Core 1.0.1

今回はcsprojではなくproject.jsonのプロジェクト構成になります。
ここからはプロジェクトが作成された後の説明になります。

Nodeを使う準備

package.jsonの作成

まずはnpm installに必要なpackage.jsonを作成します。project.jsonと同じ階層に置いてください。
パッケージの取得がメインなので細かい記述は省いています。例えばAngularJSの場合は以下のように記述します。

package.json
{
  "name": "AppName",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "angular": "~1.5.9"
  }
}

Visual Studioで追加する方法

Visual Studioから追加する方法もあります。ソリューションエクスプローラからプロジェクトを右クリックするとQuick Install Packageがあるのでこれを選択します。
quickinstallpackage.png
左のカテゴリからnpmを選択し、パッケージ名を入力します。パッケージ名が正しければ右のバージョン選択ドロップダウンからバージョンを選ぶことができます。
すごく気づきにくいのですが、下の --save-dev は選択すると編集することができます!(気づかないよ・・・:cry:)
-devを消して--saveとした後、Installを押すと上とほぼ同じようなpackage.jsonが生成されます。
npminstall.png

Visual Studio2015はproject.jsonを見つけると自動的にnpm installしてくれるみたいですね。

publishの設定

dotnet publishでリリース版を固める時に任意のコマンドを実行することができます。ここでnpm installをするように書きます。

project.json
"scripts": {
    "prepublish": [ "npm install" ]
}

こうするとdotnet publishした時に自動的にnpmも実行されます。
Visual Studioのテンプレートから作った場合はbower installになってると思いますが、これをnpm installに変更します。

BundlerMinifier.Coreの設定

このままnpm installしてもwwwroot内に保存されないですし、保存するように書き換えたとしても、本当に欲しいのはその中のjsファイル一つだけだったりします。今回はMinifierを使うことで間接的に欲しいjsをwwwroot内にコピーする方法を紹介します。

BundlerMinifier.Coreは.NET Core版のMinifiierツールです。gulpとかでやってもいいんですけど、今回はこっち使ってみます。

project.jsonの設定

project.jsonにBundlerMinifierを登録します。

project.json
"tools": {
    "BundlerMinifier.Core": "2.0.238"
}

BundlerMinifierの最新版は.NET Core 1.1.0をターゲットとしています。1.0.1を使ってる人はこのバージョンを使うと動きます。

bundleconfig.jsonの作成

project.jsonと同じ階層にbundleconfig.jsonを作成します。ここでどのファイルをminifyするかを設定します。

bundleconfig.json
[
  {
    "outputFileName": "wwwroot/scripts/vendor.min.js",
    "inputFiles": [
      "node_modules/angular/angular.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    }
  }
]

ここでnpmから取得したjsをinputFilesに指定します。
inputFilesは複数のファイルを指定することができます。複数指定すると全部ひとまとめにギュッっと圧縮して一つのjsファイルにしてくれます。

.gitignore

.gitignoreでminifyをはじくようにしないとvendor.min.jsがコミットされてしまいます。outputFileNameで指定したjsをignoreしておきましょう。

publishの設定

先ほどnpm installするために書いたprepublishにdotnet bundleを追加します。このコマンドを実行することによってminifyが実行されます。

project.json
"scripts": {
    "prepublish": [ "npm install", "dotnet bundle" ]
}

htmlの参照を変更

htmlでminifyしたファイルを見に行くようにします。

<script src="scripts/vendor.min.js"></script>

さいごに

今回はjsのみでしたが、cssのminifyも対応してるみたいです。
私はあまりWeb系詳しくないのでなんでbowerやめる流れなのかはわからないですが、とりあえずnpmに乗り換えることはできそうです。