使用Grunt，Bower，Gulp，NPM和Visual Studio 2015 for ASP.NET 4.5项目

Question

Visual Studio 2015内置支持Grunt，Bower，Gulp和NPM for ASP.NET 5项目等工具。

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

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

Answer 1

虽然Liviu Costea's answer是正确的，但我仍然花了很长时间才弄清楚它是如何实际完成的。这是我从一个新的ASP.NET 4.5.2 MVC项目开始的分步指南。本指南包括使用bower进行客户端软件包管理，但尚未覆盖捆绑/ grunt / gulp。

第1步（创建项目）

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

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

步骤2.1

卸载以下Nuget包：

• 自举
• Microsoft.jQuery.Unobstrusive.Validation
• jQuery.Validation
• 的jQuery
• Microsoft.AspNet.Web.Optimization
• WebGrease
• 的Antlr
• 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"
  }
}

保存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>

有用的链接

• 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/
• http://devkimchi.com/1511/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/

捆绑＆amp;缩小文件

在下面的评论中，LavaHot建议Bundler & Minifier extension替换我在步骤2中删除的默认捆绑包。他还建议{G封附捆绑this article。

Answer 2

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