ASP.NET Coreアプリケーションをビルドして起動してみよう

いよいよ登場「ASP.NET Core 1.0」 マルチプラットフォームな.NETとは？　第2回

（4）JavaScript／CSSのバンドル・ミニファイ

　続けてASP.NET Coreで使用される新しいツール「BundlerMinifier」を見てみましょう。「バンドル」とは複数のファイルを統合することで、「ミニファイ」とはファイルサイズを小さくすることです。ASP.NET Coreでは「bundleconfig.json」ファイルにJavaScriptやCSSファイルの最適化設定を記載します。ここでは、wwwrootフォルダ配下の「site.css」を元に「site.min.css」を出力しています。

バンドル設定「bundleconfig.json」

　project.jsonの発行イベントにてdotnet bundleというコマンドが指定されているため、サーバーにデプロイする時は自動的にバンドルとミニファイが実行されます。

ASP.NET Coreがサポートする「npm」「bower」「gulp」「grunt」

　BundlerMinifierはMicrosoftが提供しているツールですが、OSS系パッケージ管理ツールの「npm」「bower」「gulp」「grunt」を使用することもできます。

ASP.NET Coreで使用できるクライアント系パッケージマネージャ

名前（読み方）	概要
npm（エヌピーエム）	Node.jsのライブラリを管理できるパッケージマネージャ
Bower（バウアー）	フロントエンド(JavaScriptやCSS)用のパッケージ管理システム
Grunt（グラント）	JavaScriptの自動化ツール
Gulp（ガルプ）	JavaScriptの自動化ツール

　これらのツールは、Visual Studioと共にインストールされており、標準機能に近い形で使うことができます。npmやBowerのコマンドが使用されるパスについては、Visual Studioの［オプション］-［プロジェクトおよびソリューション］-［外部Webツール］ウィンドウから確認できます。

Visual StudioフォルダにインストールされているOSSツール

「Bower」の使用方法

　Bowerの使用方法ですが、ソリューションフォルダの［依存関係］の中で、［Bower］を右クリックし、［Bowerパッケージの管理..］メニューをクリックすると、Bowerパッケージ用の管理画面が表示されます。

クライアントパッケージ管理「Bower」の設定画面

　上図の通り、Bower用のGUI画面を用いて、クライアントサイドライブラリ（jQuery、Bootstrap、Angular等）の管理を行うことができます（この設定はプロジェクト直下の「bower.json」というファイルに保存されます）。

　以前のASP.NETでは全てのライブラリをNuGetで管理していましたが、ASP.NET Coreでは、.NET関連のみNuGetで管理し、クライアント系ライブラリはBowerで管理します。

Visual Studioでの「npm」「Gulp」「Grunt」の使用方法

　ASP.NET Coreプロジェクトを作成したタイミングでは、Bowerのみ利用できる状態になっています。ここでは「npm」「Gulp」「Grunt」を使用する方法について紹介します。まず［ソリューションエクスプローラ］にて、プロジェクト直下で右クリックして［新しい項目の追加］から［npm構成ファイル］を選択します。ファイル名は「package.json」のままとします。

新しい項目の追加から［npm構成ファイル］を選択（GulpやGruntも同様）

　この操作によって、Bowerに加えて、npmも使用できるようになります。続けて、pacakage.jsonを開き、以下のように、devDependenciesの部分にglupを追加します。

リスト2　npm管理ファイルである「package.json」にgulpを追加

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "gulp": "3.9.1"　　←※追加
  }
}

　次に、［新しい項目の追加］-［Gulp構成ファイル］を選択します。gulpfile.jsが生成されるので、その中に自動化したいタスクを書くことができます（Gruntも同様の手順で使用可能となります）。

ソリューションエクスプローラ内のBowerとnpm。タスクランナーでGulpを実行

　これで、Visual Studioの［タスクランナーエクスプローラ］でタスクを手動実行したり、ビルドイベント設定を行うことができます。