web-dev-qa-db-ja.com

ASP.NET 4.5プロジェクトでVisual Studio 2015でGrunt、Bower、Gulp、NPMを使用する

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

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

Visual Studio 2013でこれらのツールを使用することに関する情報を見つけることができます（たとえば、 this の質問を参照）。しかし、Visual Studio 2015ではこれらのツールのサポートが組み込まれているため、手順は異なると思います。

asp.netgulpbowervisual-studio-2015asp.net-4.5
90
Robert Hegner

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

ステップ1（プロジェクトの作成）

Visual Studio 2015で新しいASP.NET 4.5.2プロジェクト（MVCテンプレート）を作成します。

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

ステップ2.1

次のNugetパッケージをアンインストールします。

  • bootstrap
  • Microsoft.jQuery.Unobstrusive.Validation
  • jQuery.Validation
  • jQuery
  • Microsoft.AspNet.Web.Optimization
  • WebGrease
  • アントル
  • Modernizr
  • 応答する

ステップ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（プロジェクトにバウアーを追加）

ステップ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（バウ​​アーの構成）

ステップ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（他のソースの変更）

他のすべてのビューで置換

@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>

便利なリンク

バンドルと縮小

以下のコメントで LavaHot を推奨しています Bundler＆Minifier extension を、ステップ2で削除したデフォルトのバンドラーの代替として使用します。彼は この記事 = Gulpとのバンドルについて。

128
Robert Hegner

実際にはそれほど違いはありません。たとえば、新しいアイテムを追加するときに、bowerまたはnpmの構成ファイル用のテンプレートがある場合など、Visual Studio内でこれらすべてをより適切にサポートしているだけです。また、gulpまたはgrunt設定ファイルのテンプレートもあります。
。

4
Liviu Costea