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

发布于08月11日

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

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

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

Step 1 (Create Project)

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

Step 2 (删除 Bundling/Optimization from Project)

步骤2.1

卸载以下Nuget软件包:

独自创立
Microsoft.jQuery.Unobstrusive.Validation
jQuery.验证
jQuery
微软AspNet.网状物优化
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

删除 Assembly Bindings for System.Web.Optimization 和 WebGrease from Web.config

Step 3 (Add bower to Project)

步骤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软件包.

Step 4 (Configure bower)

步骤4.1

将新的bower.json文件添加到项目(Bower Configuration file项模板)

步骤4.2

Add 独自创立, jquery-validation-unobtrusive, modernizr 和 respond to dependencies:

{
  "name": "ASP.NET",
  "private": true,
  "dependencies": {
    "独自创立": "*",
    "jquery-validation-unobtrusive": "*",
    "modernizr": "*",
    "respond": "*"
  }
}

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

Step 5 (Modify `Views\Shared\_Layout.cshtml`)

步骤5.1

代替

@Styles.Render("~/Content/css")

具有

<link rel="stylesheet" href="~/wwwroot/lib/独自创立/dist/css/独自创立.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/独自创立")

具有

<script src="~/wwwroot/lib/独自创立/dist/js/独自创立.min.js"></script>
<script src="~/wwwroot/lib/respond/dest/respond.min.js"></script>

Step 6 (Modify other sources)

在所有其他视图中替换

@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>

Useful Links

Bundling & Minifying

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 具有 Gulp.

推荐答案