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 的過程是不同的，因為它內置了對這些工具的支持。

雖然Liviu Costea 的回答是正確的，但我仍然花了很長時間才弄清楚它是如何完成的。所以這是我從一個新的 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.Unobtrusive.Validation
• jQuery.驗證
• jQuery
• Microsoft.AspNet.Web.Optimization
• 網路潤滑脂
• 螞蟻
• 現代化
• 回應

步驟 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/>
• <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 擴展來替代我在第 2 步中刪除的預設捆綁器。他還推薦了這篇關於與 Gulp 捆綁的文章。

引用自：https://stackoverflow.com/questions/31872622