将Visual Studio 2015中的Grunt,Bower,Gulp,NPM用于ASP.NET 4.5项目

Visual Studio 2015内置支持ASP.NET 5项目的Grunt,Bower,Gulp和NPM等工具。

但是,当我使用Visual Studio 2015创buildASP.NET 4.5.2项目时,它不使用这些工具。 我想使用bower而不是nuget来pipe理客户端软件包。

我可以在Visual Studio 2013中find有关使用这些工具的信息(例如,请参阅此问题)。 但是我猜这个过程对于Visual Studio 2015是不同的,因为它已经构build了对这些工具的支持。

虽然Liviu Costea的回答是正确的,但我花了相当长的一段时间才弄清楚它是如何实际完成的。 所以这里是我从一个新的ASP.NET 4.5.2 MVC项目开始的分步指南。 本指南包括使用凉亭的客户端软件包pipe理,但尚未涵盖捆绑/咕噜/吞咽。

第1步(创build项目)

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

第2步(从项目中删除捆绑/优化)

步骤2.1

卸载以下的Nuget包:

  • 引导
  • Microsoft.jQuery.Unobstrusive.Validation
  • jQuery.Validation
  • jQuery的
  • Microsoft.AspNet.Web.Optimization
  • WebGrease
  • ANTLR
  • Modernizr的
  • 响应

步骤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

步骤3(将项目添加到项目)

步骤3.1

将新的package.json文件添加到项目中( NPM configuration file项目模板)

步骤3.2

添加bowerdevDependencies

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

package.json保存时,会自动安装凉亭软件包。

第4步(configuration凉亭)

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

在所有其他视图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> 

有用的链接


捆绑和缩小

在下面的评论中, LavaHot推荐Bundler&Minifier扩展作为我在步骤2中删除的默认捆绑器的替代品。他还推荐这篇与Gulp捆绑的文章 。

实际上并不太相同。 只是在Visual Studio中有更好的支持,例如当你添加新的项目时,你有模板的bower或npmconfiguration文件。 你也有模糊的吞咽或咕噜configuration文件。
但是,就像VS 2013一样,使用Task Runner Explorer仍然可以完成grunt / gulp任务的实际调用,并将它们绑定到构build事件上。