Using Grunt, Bower, Gulp, NPM with Visual Studio 2015 for a ASP.NET 4.5 Project(将 Grunt、Bower、Gulp、NPM 与 Visual Studio 2015 一起用于 ASP.NET 4.5 项目)

问题描述

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

Visual Studio 2015 comes with built in support for tools like Grunt, Bower, Gulp and NPM for ASP.NET 5 projects.

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

However when I create a ASP.NET 4.5.2 project using Visual Studio 2015 it doesn't use these tools. I'd like to use bower instead of nuget to manage client side packages.

我可以找到有关在 Visual Studio 2013 中使用这些工具的信息(请参阅 this 问题为例).但我猜 Visual Studio 2015 的过程有所不同，因为它内置了对这些工具的支持.

I can find information about using these tools with Visual Studio 2013 (see this question for example). But I guess the procedure is different for Visual Studio 2015 since it has built in support for these tools.

推荐答案

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

While Liviu Costea's answer is correct, it still took me quite some time to figure out how it is actually done. So here is my step-by-step guide starting from a new ASP.NET 4.5.2 MVC project. This guide includes client-side package management using bower but does not (yet) cover bundling/grunt/gulp.

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

Create a new ASP.NET 4.5.2 Project (MVC Template) with Visual Studio 2015.

卸载以下 Nuget 包:

Uninstall the following Nuget Packages:

• 引导
• Microsoft.jQuery.Unobtrusive.Validation
• jQuery.Validation
• jQuery
• Microsoft.AspNet.Web.Optimization
• WebGrease
• Antlr
• 现代化
• 回复

从项目中删除 App_StartBundleConfig.cs.

删除

using System.Web.Optimization;

和

BundleConfig.RegisterBundles(BundleTable.Bundles);

来自 Global.asax.cs

删除

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

来自 ViewsWeb.config

从 Web.config

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

Add new package.json file to project (NPM configuration file item template)

将 bower 添加到 devDependencies:

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

保存package.json时会自动安装bower包.

The bower package is automatically installed when package.json is saved.

在项目中添加新的bower.json文件(Bower配置文件项模板)

Add new bower.json file to project (Bower Configuration file item template)

将 bootstrap、jquery-validation-unobtrusive、modernizr 和 respond 添加到依赖项:

Add bootstrap, jquery-validation-unobtrusive, modernizr and respond to dependencies:

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

保存bower.json时会自动安装这些包及其依赖项.

These packages and their dependencies are automatically installed when bower.json is saved.

替换

@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 步(修改其他来源)

在所有其他视图中替换

Step 6 (Modify other sources)

In all other Views replace

@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 &缩小器扩展 作为我在步骤 2 中删除的默认捆绑器的替代品.他还推荐 这篇文章关于与 Gulp 捆绑.

In the comments below LavaHot recommends the Bundler & Minifier extension as a replacement for the default bundler which I remove in step 2. He also recommends this article on bundling with Gulp.

这篇关于将 Grunt、Bower、Gulp、NPM 与 Visual Studio 2015 一起用于 ASP.NET 4.5 项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！