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の場合は以下のように記述します。
{
"name": "AppName",
"version": "1.0.0",
"private": true,
"dependencies": {
"angular": "~1.5.9"
}
}
Visual Studioで追加する方法
Visual Studioから追加する方法もあります。ソリューションエクスプローラからプロジェクトを右クリックすると__Quick Install Package__があるのでこれを選択します。
左のカテゴリから__npm__を選択し、パッケージ名を入力します。パッケージ名が正しければ右のバージョン選択ドロップダウンからバージョンを選ぶことができます。
すごく気づきにくいのですが、下の --save-dev は選択すると編集することができます！(気づかないよ・・・
)
-dev_を消して--save_とした後、Installを押すと上とほぼ同じようなpackage.jsonが生成されます。
Visual Studio2015はproject.jsonを見つけると自動的にnpm installしてくれるみたいですね。
publishの設定
dotnet publishでリリース版を固める時に任意のコマンドを実行することができます。ここでnpm installをするように書きます。
"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を登録します。
"tools": {
"BundlerMinifier.Core": "2.0.238"
}
BundlerMinifierの最新版は.NET Core 1.1.0をターゲットとしています。1.0.1を使ってる人はこのバージョンを使うと動きます。
bundleconfig.jsonの作成
project.jsonと同じ階層にbundleconfig.jsonを作成します。ここでどのファイルをminifyするかを設定します。
[
{
"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が実行されます。
"scripts": {
"prepublish": [ "npm install", "dotnet bundle" ]
}
htmlの参照を変更
htmlでminifyしたファイルを見に行くようにします。
<script src="scripts/vendor.min.js"></script>
さいごに
今回はjsのみでしたが、cssのminifyも対応してるみたいです。
私はあまりWeb系詳しくないのでなんでbowerやめる流れなのかはわからないですが、とりあえずnpmに乗り換えることはできそうです。