asp.net gulp bower visual-studio-2015 asp.net-4.5

Uso de Grunt, Bower, Gulp, NPM con Visual Studio 2015 para un proyecto ASP.NET 4.5



visual-studio-2015 asp.net-4.5 (2)

Visual Studio 2015 viene con soporte integrado para herramientas como Grunt, Bower, Gulp y NPM para proyectos ASP.NET 5.

Sin embargo, cuando creo un proyecto ASP.NET 4.5.2 con Visual Studio 2015, no usa estas herramientas. Me gustaría usar Bower en lugar de Nuget para administrar los paquetes del lado del cliente.

Puedo encontrar información sobre el uso de estas herramientas con Visual Studio 2013 (consulte this pregunta, por ejemplo). Pero supongo que el procedimiento es diferente para Visual Studio 2015, ya que ha incorporado soporte para estas herramientas.

En realidad no es muy diferente. Es solo que hay un mejor soporte para todos estos dentro de Visual Studio, por ejemplo, cuando agrega nuevos elementos, tiene plantillas para archivos de configuración bower o npm. También tiene plantillas para archivos de configuración Gulp o Grunt.
Pero la llamada a las tareas de gruñir / tragar y vincularlas para crear eventos todavía se realiza con el Explorador de tareas Runner, al igual que en VS 2013.

Si bien la respuesta de Liviu Costea es correcta, todavía me llevó bastante tiempo descubrir cómo se hace realmente. Así que aquí está mi guía paso a paso a partir de un nuevo proyecto MVC de ASP.NET 4.5.2. Esta guía incluye la gestión de paquetes del lado del cliente utilizando Bower, pero no cubre (todavía) agrupación / gruñido / trago.

Paso 1 (Crear proyecto)

Cree un nuevo proyecto ASP.NET 4.5.2 (plantilla MVC) con Visual Studio 2015.

Paso 2 (Eliminar agrupación / optimización del proyecto)

Paso 2.1

Desinstale los siguientes paquetes Nuget:

  • oreja
  • Microsoft.jQuery.Unobstrusive.Validation
  • jQuery.Validation
  • jQuery
  • Microsoft.AspNet.Web.Optimization
  • WebGrease
  • Antlr
  • Modernizr
  • Responder

Paso 2.2

Eliminar App_Start/BundleConfig.cs del proyecto.

Paso 2.3

Eliminar

using System.Web.Optimization;

y

BundleConfig.RegisterBundles(BundleTable.Bundles);

de Global.asax.cs

Paso 2.4

Eliminar

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

de Views/Web.config

Paso 2.5

Eliminar enlaces de ensamblaje para System.Web.Optimization y WebGrease de Web.config

Paso 3 (Agregar bower al proyecto)

Paso 3.1

Agregue un nuevo archivo package.json al proyecto (plantilla de elemento del NPM configuration file )

Paso 3.2

Agregue devDependencies a devDependencies :

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

El paquete Bower se instala automáticamente cuando se guarda package.json .

Paso 4 (Configurar bower)

Paso 4.1

Agregue un nuevo archivo bower.json al proyecto (plantilla de elemento del Bower Configuration file )

Paso 4.2

Agregue bootstrap , jquery-validation-unobtrusive , modernizr y respond a las dependencias:

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

Estos paquetes y sus dependencias se instalan automáticamente cuando se guarda bower.json .

Paso 5 (Modificar Views/Shared/_Layout.cshtml )

Paso 5.1

Reemplazar

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

con

<link rel="stylesheet" href="~/wwwroot/lib/bootstrap/dist/css/bootstrap.min.css" /> <link rel="stylesheet" href="~/Content/Site.css" />

Paso 5.2

Reemplazar

@Scripts.Render("~/bundles/modernizr")

con

<script src="~/wwwroot/lib/modernizr/modernizr.js" ></script>

Paso 5.3

Reemplazar

@Scripts.Render("~/bundles/jquery")

con

<script src="~/wwwroot/lib/jquery/dist/jquery.min.js"></script>

Paso 5.4

Reemplazar

@Scripts.Render("~/bundles/bootstrap")

con

<script src="~/wwwroot/lib/bootstrap/dist/js/bootstrap.min.js"></script> <script src="~/wwwroot/lib/respond/dest/respond.min.js"></script>

Paso 6 (Modificar otras fuentes)

En todas las demás vistas, reemplace

@Scripts.Render("~/bundles/jqueryval")

con

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

Enlaces útiles

Agrupación y Minificación

En los comentarios a continuación, LavaHot recomienda la extensión Bundler & Minifier como reemplazo del paquete predeterminado que eliminé en el paso 2. También recomienda http://www.jeffreyfritz.com/2015/05/where-did-my-asp-net-bundles-go-in-asp-net-5/ sobre el paquete con Gulp.