質問

Visual Studio 2015には、ASP.NET 5プロジェクト用のGrunt、Bower、Gulp、NPMのようなツールのサポートが組み込まれています。

しかし、私が Visual Studio 2015 を使用して ASP.NET 4.5.2 プロジェクトを作成すると、これらのツールは使用されません。私は、クライアント側のパッケージを管理するために、nugetの代わりにbowerを使用したいと思います。

Visual Studio 2013 でこれらのツールを使用することについての情報を見つけることができます (以下を参照してください。 これ の質問を参照)。しかし、私はVisual Studio 2015がこれらのツールのサポートを内蔵しているので、手順は異なると思います。

どのように解決するのですか？

一方 Liviu Costeaの回答 は正しいのですが、実際にどのように行われるのかを理解するのにはまだ時間がかかりました。そこで、新しい ASP.NET 4.5.2 MVC プロジェクトから始める私のステップバイステップのガイドを紹介します。このガイドには、bowerを使用したクライアントサイドのパッケージ管理が含まれていますが、bundling/grunt/gulpは（まだ）カバーしていません。

ステップ 1 (プロジェクトの作成)

Visual Studio 2015 で ASP.NET 4.5.2 プロジェクト (MVC Template) を新規作成します。

ステップ2（プロジェクトからバンドル/最適化を削除する）

ステップ2.1

以下のNuget Packagesをアンインストールします。

• ブートストラップ
• Microsoft.jQuery.Unobstrusive.Validationを使用する。
• jQuery.Validation（バリデーション
• jQuery
• Microsoft.AspNet.Web.Optimization（マイクロソフト・アスパネット・ウェブ・オプティマイゼーション
• WebGrease
• Antlr
• モダナイザー
• レスポンシブ

ステップ2.2

削除する App_Start\BundleConfig.cs をプロジェクトから削除します。

ステップ2.3

削除する

using System.Web.Optimization;

と

BundleConfig.RegisterBundles(BundleTable.Bundles);

から Global.asax.cs

ステップ2.4

削除する

<add namespace="System.Web.Optimization"/>

から Views\Web.config

ステップ2.5

のアセンブリバインディングを削除します。 System.Web.Optimization と WebGrease から Web.config

ステップ3 (bowerをプロジェクトに追加する)

ステップ3.1

新しい package.json ファイルをプロジェクトに追加します ( NPM configuration file 項目テンプレート)

ステップ3.2

追加 bower に devDependencies :

{
  "version": "1.0.0",
  "name": "ASP.NET",
  "private": true,
  "devDependencies": {
    "bower": "1.4.1"
  }
}

bowerパッケージは、以下のような場合に自動的にインストールされます。 package.json が保存されたときに自動的にインストールされます。

ステップ4 (bowerの設定)

ステップ4.1

新しい bower.json ファイルをプロジェクトに追加します ( Bower Configuration file 項目テンプレート)

ステップ4.2

追加 bootstrap , jquery-validation-unobtrusive , modernizr と respond を依存関係に変更する。

{
  "name": "ASP.NET",
  "private": true,
  "dependencies": {
    "bootstrap": "*",
    "jquery-validation-unobtrusive": "*",
    "modernizr": "*",
    "respond": "*"
  }
}

これらのパッケージとその依存関係は、以下のような場合に自動的にインストールされます。 bower.json が保存されたときに自動的にインストールされます。

ステップ5 (修正 Views\Shared\_Layout.cshtml )

ステップ5.1

置き換え

@Styles.Render("~/Content/css")

で

<link rel="stylesheet" href="~/wwwroot/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/Content/Site.css" />

ステップ5.2

置き換え

@Scripts.Render("~/bundles/modernizr")

で

<script src="~/wwwroot/lib/modernizr/modernizr.js" ></script>

ステップ5.3

置き換え

@Scripts.Render("~/bundles/jquery")

で

<script src="~/wwwroot/lib/jquery/dist/jquery.min.js"></script>

ステップ5.4

置き換え

@Scripts.Render("~/bundles/bootstrap")

で

<script src="~/wwwroot/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="~/wwwroot/lib/respond/dest/respond.min.js"></script>

ステップ6（他のソースを修正する）

他のすべてのViewで

@Scripts.Render("~/bundles/jqueryval")

で

<script src="~/wwwroot/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/wwwroot/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>

---

お役立ちリンク集

• http://idisposable.co.uk/2015/02/switching-the-client-side-build-library-in-visual-studio-2013-mvc-template-to-gulp-and-bower/
• http://www.baconapplications.com/running-bower-grunt-in-visual-studio-2013/
• https://web.archive.org/web/20190611132417/http://old.devkimchi.com:80/2015/01/06/integrating-grunt-and-bower-with-visual-studio-2013
• http://www.dotnetcurry.com/visualstudio/1096/using-grunt-gulp-bower-visual-studio-2013-2015
• http://andy-carter.com/blog/a-beginners-guide-to-package-manager-bower-and-using-gulp-to-manage-components
• http://www.jeffreyfritz.com/2015/05/where-did-my-asp-net-bundles-go-in-asp-net-5/

---

バンドルとミニ化

以下のコメントで LavaHot をお勧めします。 バンドルとミニフィアの拡張機能 を、ステップ 2 で削除するデフォルトのバンドラーの代わりとして使用します。また、彼は この記事 をGulpでバンドルすることを推奨しています。