使用Grunt、Bower、Gulp和NPM在Visual Studio 2015中为ASP.NET 4.5项目进行技术支持。

Question

Visual Studio 2015内置支持Grunt、Bower、Gulp和NPM等工具，适用于ASP.NET 5项目。但是，如果我使用Visual Studio 2015创建ASP.NET 4.5.2项目，则不会使用这些工具。我想使用Bower而不是Nuget来管理客户端软件包。我可以找到关于在Visual Studio 2013中使用这些工具的信息（例如，请参见此问题）。但是，由于Visual Studio 2015已经内置支持这些工具，所以操作可能会有所不同。

- Robert Hegner

Answer 1

虽然Liviu Costea的答案是正确的，但我还是花了相当长的时间才弄清楚它实际上是如何完成的。因此，这里是我从一个新的ASP.NET 4.5.2 MVC项目开始的逐步指南。本指南包括使用bower进行客户端包管理，但尚未涵盖捆绑/grunt/gulp。

第一步（创建项目）

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

第二步（从项目中删除捆绑/优化）

2.1 步骤

卸载以下Nuget软件包：

• bootstrap
• Microsoft.jQuery.Unobstrusive.Validation
• jQuery.Validation
• jQuery
• Microsoft.AspNet.Web.Optimization
• WebGrease
• Antlr
• Modernizr
• Respond

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 配置文件 项模板）。

步骤 3.2

将 bower 添加到 devDependencies 中：

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

当保存 package.json 文件时，将自动安装 bower 包。

步骤4（配置 bower）

步骤4.1

将新的 bower.json 文件添加到项目中（Bower 配置文件 项目模板）

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

第六步（修改其他源代码）

在所有其他视图中替换

@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 推荐使用 Bundler & Minifier 扩展 作为替代我在第2步中删除的默认打包程序。他还推荐这篇文章关于使用 Gulp 进行打包。

- Robert Hegner

---

非常感谢。我是否正确地理解，有一步骤被忽略了：如何将“/wwwroot”映射到“/../bower_components”（或gulp/grunt配置如何将bower包移动到“/wwwroot”）？您能否添加此步骤，并描述您建议如何安排js/css代码以在VS2015环境中与IIS Express运行？ - Roman Pokrovskij

原来打包对我非常有用。现在你已经删除了默认的打包程序，我想推荐Bundler＆Minifier来替换它。它使用任务运行器资源管理器，并具有类似于npm和bower的配置文件。它也是Web Essentials的一部分，所以您可能已经安装了它。 - LavaHot

这是一篇关于使用gulp打包的好文章，链接在此：http://www.jeffreyfritz.com/2015/05/where-did-my-asp-net-bundles-go-in-asp-net-5/。 - LavaHot

@LavaHot，感谢您分享这些有趣的链接。我很自然地把您的链接包含在我的回答中。 - Robert Hegner

感谢@SagebrushGIS提供的详细信息！我也在研究如何将Bower包管理添加到我的MVC项目中。我已经通过VS2015添加了bower.json，但我没有看到你所说的bowerrc文件。我可能错过了哪些步骤或者应该在哪里找到这个文件？作为一个临时解决办法，我使用：<link rel="stylesheet" href="~/bower_components/bootstrap/dist/css/bootstrap.min.css" />。 - Guido Kersten

Answer 2

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

- Liviu Costea

---

我猜我仍然不知道如何在已安装该工具的VS中安装npm包。每次我尝试安装.npm，它都会说我的项目没有设置为节点或其他内容。 - Mastro

你需要先在根目录下创建 package.json 文件。我通常会将其创建在目标项目的根目录中，与 csproj 文件同级。然后，你就可以使用 npm 命令了。 - Roman