asp.net - 将 Grunt、Bower、Gulp、NPM 与 Visual Studio 2015 结合使用用于 ASP.NET 4.5 项目

Question

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

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 软件包:

• 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 的程序集绑定(bind)

第 3 步(向项目添加 bower )

步骤3.1

将新的 package.json 文件添加到项目(NPM 配置文件 项模板)

步骤3.2

将 bower 添加到 devDependency:

{
  "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>

第 6 步(修改其他来源)

在所有其他 View 中替换

@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 extension作为我在步骤 2 中删除的默认捆绑程序的替代品。他还推荐 this article关于与 Gulp 捆绑。