Si bien la respuesta de Liviu Costea es correcta, todavía me tomó bastante tiempo descubrir cómo se hace realmente. Así que aquí está mi guía paso a paso a partir de un nuevo proyecto ASP.NET 4.5.2 MVC. Esta guía incluye la administración de paquetes del lado del cliente usando bower pero (todavía) no cubre empaquetado / 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 de 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
Quitar enlaces de ensamblaje para System.Web.Optimization
y WebGrease
deWeb.config
Paso 3 (agregar bower al proyecto)
Paso 3.1
Agregar nuevo package.json
archivo al proyecto ( NPM configuration file
plantilla de elemento)
Paso 3.2
Agregar bower
a devDependencies
:
{
"version": "1.0.0",
"name": "ASP.NET",
"private": true,
"devDependencies": {
"bower": "1.4.1"
}
}
El paquete bower se instala automáticamente cuando package.json
se guarda.
Paso 4 (Configurar bower)
Paso 4.1
Agregar nuevo bower.json
archivo al proyecto ( Bower Configuration file
plantilla de elemento)
Paso 4.2
Añadir bootstrap
, jquery-validation-unobtrusive
, modernizr
y respond
de dependencias:
{
"name": "ASP.NET",
"private": true,
"dependencies": {
"bootstrap": "*",
"jquery-validation-unobtrusive": "*",
"modernizr": "*",
"respond": "*"
}
}
Estos paquetes y sus dependencias se instalan automáticamente cuando bower.json
se guarda.
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 empaquetado predeterminado que elimino en el paso 2. También recomienda este artículo sobre empaquetado con Gulp.