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

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

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

---

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

实际上并没有太大的不同。只是在VisualStudio中对所有这些都有更好的支持，例如，当您添加新项目时，您有用于bower或npm配置文件的模板。您也有gulp或GULNT配置文件的模板。
但实际调用grunt/gulp任务并将其绑定到构建事件仍然是通过Task Runner Explorer完成的，就像在VS 2013中一样。

虽然正确，但我还是花了相当长的时间才弄清楚它是如何实际完成的。下面是我从一个新的ASP.NET 4.5.2 MVC项目开始的分步指南。本指南包括使用bower的客户端包管理，但（尚未）包括捆绑/咕噜/咕噜

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

步骤2（从项目中删除捆绑/优化） 步骤2.1 卸载以下Nuget软件包：

• 引导
• Microsoft.jQuery.Unobstructive.Validation
• jQuery.Validation
• jQuery
• Microsoft.AspNet.Web.Optimization
• 网脂
• Antlr
• 现代化者
• 回应

步骤2.2 从项目中删除

App\u Start\BundleConfig.cs

步骤2.3 除去

using System.Web.Optimization;

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

及

从

Global.asax.cs

步骤2.4 除去

using System.Web.Optimization;

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

保存

package.json

时，会自动安装bower软件包

步骤4（配置bower） 步骤4.1 向项目添加新的

bower.json

文件（

bower配置文件

item模板）

步骤4.2 将

bootstrap

，

jquery验证不引人注目

，

modernizer

和

响应

添加到依赖项：

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

保存

bower.json

时，将自动安装这些包及其依赖项

步骤5（修改

Views\Shared\\u Layout.cshtml

） 步骤5.1 替换

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

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

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

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

与

与

与

与

与

---

有用的链接

---

捆绑和缩小

---

在下面的注释中，建议将作为默认绑定器的替换，我将在步骤2中删除该绑定器。他还建议您搭配Gulp。

非常感谢。我说的对吗，遗漏了一个步骤：如何将~/wwwroot映射到/./bower\u组件（或gulp/grunt配置如何将bower包移动到“~/wwwroot”）您能否添加此步骤，并描述您建议如何安排js/css代码以在VS2015环境中与IIS Express一起运行？当您通过Visual Studio 2015创建

bower.json

文件时，它也会自动创建

bowerrc

文件，它覆盖了从

bower\u组件到
wwwroot/lib
的bower安装的默认位置，因此捆绑对我来说非常有用。现在您已经删除了默认绑定器，我建议您替换它。它使用TaskRunner资源管理器，并具有类似于npm和bower的配置文件。它也是Web Essentials的一部分，因此您可能已经安装了它。这是一篇关于这个主题的好文章，可以与gulp捆绑在一起。感谢您提供的详细信息@SagebrushGIS！我还在研究如何将Bower包管理添加到我的MVC项目中。我已经通过VS2015添加了bower.json，但是我没有看到您所说的bowerrc文件。我可能缺少任何步骤，或者我应该在哪里找到此文件？作为目前的解决办法，我使用：我想我仍然不知道在安装了工具的情况下如何在VS中安装npm包。每次我尝试安装.npm时，它都会说我的项目没有针对节点或您需要首先在根文件夹中创建package.json的任何内容进行设置。我通常在目标项目的根目录中将其创建为csproj文件的同级。然后，您可以使用npm命令
@Scripts.Render("~/bundles/jquery")

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

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