在Visual Studio 2015中使用Grunt、Bower、Gulp和NPM进行ASP.NET 4.5项目

rryofs0p  于 2022-12-16  发布在  Gulp
关注(0)|答案(2)|浏览(181)

VisualStudio2015为ASP.NET5项目提供了对Grunt、Bower、Gulp和NPM等工具的内置支持。
然而,当我使用Visual Studio 2015创建一个ASP.NET 4.5.2项目时,它没有使用这些工具。我想使用bower而不是nuget来管理客户端包。
我可以找到有关在Visual Studio 2013中使用这些工具的信息(例如,请参见this问题)。但我猜Visual Studio 2015的过程是不同的,因为它内置了对这些工具的支持。

jdg4fx2g

jdg4fx2g1#

虽然Liviu Costea's answer是正确的,但我还是花了相当长的时间来弄清楚它实际上是如何完成的。所以这里是我从一个新的ASP.NET 4.5.2 MVC项目开始的一步一步的指南。这个指南包括使用bower的客户端包管理,但(还)没有包括捆绑/咕哝/ 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
  • 卷筒纸润滑脂
  • 安特尔
  • 现代化
  • 回应

步骤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.OptimizationWebGrease的程序集绑定

第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(配置bower)

步骤4.1

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

步骤4.2

bootstrapjquery-validation-unobtrusivemodernizrrespond添加到依赖项:

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

有用链接

捆绑和缩小

在下面的评论中,LavaHot推荐Bundler & Minifier extension作为我在步骤2中删除的默认捆绑器的替代品。他还推荐this article与Gulp捆绑。

wvyml7n5

wvyml7n52#

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

相关问题