将 Grunt、Bower、Gulp、NPM 与 Visual Studio 2015 用于 ASP.NET 4.5 项目

Using Grunt, Bower, Gulp, NPM with Visual Studio 2015 for a ASP.NET 4.5 Project

Visual Studio 2015 为 ASP.NET 5 个项目内置了对 Grunt、Bower、Gulp 和 NPM 等工具的支持。

然而，当我使用 Visual Studio 2015 创建一个 ASP.NET 4.5.2 项目时，它没有使用这些工具。我想使用 bower 而不是 nuget 来管理客户端包。

我可以在 Visual Studio 2013 中找到有关使用这些工具的信息（例如，参见 this 问题）。但我猜 Visual Studio 2015 的过程有所不同，因为它内置了对这些工具的支持。

其实差别不大。只是 Visual Studio 中对所有这些有更好的支持，例如，当您添加新项目时，您有 bower 或 npm 配置文件的模板。此外，您还有 gulp 或 grunt 配置文件的模板。
但是实际调用 grunt/gulp 任务并将它们绑定到构建事件仍然是使用 Task Runner Explorer 完成的，就像在 VS 2013 中一样.

虽然 是正确的，但我仍然花了很长时间才弄清楚它是如何完成的。所以这是我从新的 ASP.NET 4.5.2 MVC 项目开始的分步指南。本指南包括使用 Bower 的客户端包管理，但（尚未）涵盖 bundling/grunt/gulp.

步骤 1（创建项目）

使用 Visual Studio 2015 创建一个新的 ASP.NET 4.5.2 项目（MVC 模板）。

步骤 2（从项目中删除 Bundling/Optimization）

步骤 2.1

卸载以下 Nuget 包：

  • bootstrap
  • Microsoft.jQuery.Unobstrusive.Validation
  • jQuery.Validation
  • jQuery
  • Microsoft.AspNet.Web.Optimization
  • WebGrease
  • 蚂蚁
  • 现代化
  • 回复

步骤 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

从 Web.config

中删除 System.Web.Optimization 和 WebGrease 的程序集绑定

步骤 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"
  }
}

保存 package.json 时会自动安装 bower 包。

第 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 recommends the Bundler & Minifier extension as a replacement for the default bundler which I remove in step 2. He also recommends this article 下面关于与 Gulp 捆绑的评论中。