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

Question 1

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的过程有所不同，因为它内置了对这些工具的支持。

Question 2

尽管Liviu Costea的答案是正确的，但我仍然花了很多时间来弄清楚它是如何完成的。因此，这是我的逐步指南，从一个新的ASP.NET 4.5.2 MVC项目开始。本指南包括使用Bower的客户端程序包管理，但是（尚未）涵盖捆绑/咕gr声/吞咽。

步骤1（创建项目）

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

步骤2（从项目中删除捆绑/优化）

步骤2.1

卸载以下Nuget软件包：

引导程序
Microsoft.jQuery.Unobtrutrusive.Validation
jQuery.Validation
jQuery的
Microsoft.AspNet.Web.Optimization
Web油脂
蚂蚁
现代化
响应

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

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建议使用Bundler＆Minifier扩展程序作为我在步骤2中删除的默认捆绑程序的替代。他还建议这篇关于与Gulp捆绑在一起的文章。

Question 3

实际上并没有太大的区别。只是在Visual Studio中对所有这些都提供了更好的支持，例如，当您添加新项时，便拥有了Bower或npm配置文件的模板。另外，您还有用于gulp或grunt配置文件的模板。
但是，就像VS 2013中一样，仍然使用Task Runner Explorer来完成对grunt / gulp任务的实际调用并将其绑定以构建事件。