mvc minificar javascript css asp.net-mvc-4 minify asp.net-optimization

minificar - Cómo deshabilitar la minificación de Javascript/CSS en ASP.NET MVC 4 Beta



minificar html (10)

Solo estoy probando ASP.NET MVC 4 pero no puedo averiguar cómo deshabilitar la función de minificación de Javascript / CSS. Especialmente para el entorno de desarrollo, esto ayudará enormemente en la depuración. Me imagino que sería un cambio en web.config pero como ASP.NET MVC 4 todavía está en fase beta en este momento, realmente no hay mucha información disponible. Agradecería si alguien puede ayudar o señalar las publicaciones de blog correctas, etc.

Después de la llamada a EnableDefaultBundles() en Global.asax, puedes hacer esto ...

if ( ... running in development environment ...) { var registeredBundles = BundleTable.Bundles.GetRegisteredBundles(); foreach (var bundle in registeredBundles) { if (bundle.Transform is System.Web.Optimization.JsMinify) bundle.Transform = new NoTransform(); } }

No es bonito (modifica el estado establecido por el sistema), pero es mucho menos código que todas las otras sugerencias, aún le permite usar el comportamiento de agrupación estándar y no implica ningún cambio en sus vistas.

En Global.asax.cs

#if DEBUG foreach (var bundle in BundleTable.Bundles) { bundle.Transform = new NoTransform(); } #endif

En las versiones más recientes de ASP.NET MVC simplemente agregue

#if DEBUG foreach (var bundle in BundleTable.Bundles) { bundle.Transforms.Clear(); } #endif

justo después de

BundleConfig.RegisterBundles(...);

En lugar de reemplazar las instancias de JsMinify y CssMinify, uno puede usar interfaces. Esta opción no estaba disponible en versiones anteriores porque el segundo parámetro del constructor era un tipo en lugar de una interfaz.

IBundleTransform jsTransform; IBundleTransform cssTransform; #if DEBUG jsTransform = new NoTransform("text/javascript"); cssTransform = new NoTransform("text/css"); #else jsTransform = new JsMinify(); cssTransform = new CssMinify(); #endif Bundle jsBundle = new Bundle("~/JsB", jsTransform); Bundle cssBundle = new Bundle("~/CssB", cssTransform);

Quizás también vale la pena destacar que, para los scripts que se suministran con versiones minificadas y no minificadas, por ejemplo, jQuery, se puede usar un método auxiliar para eliminar opcionalmente ".min" para las construcciones DEBUG para facilitar la depuración:

private string Min(string scriptNameIncludingMin) { #if DEBUG return scriptNameIncludingMin.Replace(".min", ""); // Remove .min from debug builds #else return scriptNameIncludingMin; #endif } // ... jsBundle.AddFile(Min("~/Scripts/jquery-1.7.2.min.js"));

Otra alternativa (probada con v1.1.0.0 y MVC5):

public class BundleConfig { public static void Register() { ScriptBundle jsBundle = new ScriptBundle("~/Scripts/myscript.min.js"); jsBundle.Include("~/Scripts/myscript.js"); DisableInDebugMode(jsBundle); BundleTable.Bundles.Add(jsBundle); } private static void DisableInDebugMode(ScriptBundle jsBundle) { #if DEBUG // Don''t minify in debug mode jsBundle.Transforms.Clear(); #endif } }

Otra opción sería crear un Ayudante HTML que podría usar para crear el script y las etiquetas de enlace. Esto es lo que he implementado para el Javascript, que también se puede hacer para el CSS:

public static class BundleHelper { public static MvcHtmlString JsBundle(this HtmlHelper helper, string bundlePath) { var jsTag = new TagBuilder("script"); jsTag.MergeAttribute("type", "text/javascript"); return ReferenceBundle(helper, bundlePath, jsTag); } public static MvcHtmlString ReferenceBundle(this HtmlHelper helper, string bundlePath, TagBuilder baseTag) { var httpContext = helper.ViewContext.HttpContext; var urlHelper = new UrlHelper(helper.ViewContext.RequestContext); Bundle bundle = BundleTable.Bundles.GetBundleFor(bundlePath); var htmlString = new StringBuilder(); if (bundle != null) { var bundleContext = new BundleContext(helper.ViewContext.HttpContext, BundleTable.Bundles, urlHelper.Content(bundlePath)); if (!httpContext.IsDebuggingEnabled) { baseTag.MergeAttribute("href", System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl(bundlePath)); return new MvcHtmlString(baseTag.ToString()); } foreach (var file in bundle.EnumerateFiles(bundleContext)) { var basePath = httpContext.Server.MapPath("~/"); if (file.FullName.StartsWith(basePath)) { var relPath = urlHelper.Content("~/" + file.FullName.Substring(basePath.Length)); baseTag.MergeAttribute("href", relPath, true); htmlString.AppendLine(baseTag.ToString()); } } } return new MvcHtmlString(htmlString.ToString()); } }

Ahora todo lo que tienes que hacer es llamarlo en tu vista:

<head> <meta charset="utf-8" /> <title>@ViewBag.Title - My ASP.NET MVC Application</title> <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> <link href="~/Content/css" rel="stylesheet" type="text/css" /> <link href="~/Content/themes/base/css" rel="stylesheet" type="text/css" /> @Html.JsBundle("~/scripts/js") <meta name="viewport" content="width=device-width" /> </head>

Y representará los scripts como referencias separadas, o utilizará la nueva función de agrupación / minimización dependiendo de la configuración de depuración en su web.config. Usé parte del código de http://codecutout.com/resource-minify-bundling como referencia al crear mi ayudante si desea ver algunos ejemplos más. Su ayudante está escrito un poco mejor, lanzando excepciones cuando se suministran argumentos no válidos, etc ... Simplemente no he logrado limpiar la mía todavía.

Pruebe una nueva extensión para System.Web.Optimization - Bundle Transformer . En Bundle Transformer se implementaron varias oportunidades para simplificar la depuración (consulte la documentation ).

Puede registrar sus propios paquetes en Global.asax y usar la clase NoTransform si no desea que se minimice el contenido.

Personalmente no quiero que mi guión se transforme en absoluto. Acabo de crear dos directorios de secuencias de comandos. Uno con las versiones del script de depuración y otro con las versiones reducidas originalmente descargadas.

El MVC 4 listo para usar (JsMinify) rompe jQuery 1.7.1 para Opera, por lo que no quiero usar ese. Acabo de poner las siguientes líneas en mi método Global.asax : Application_Start() :

Bundle debugScripts = new Bundle("~/DebugScripts", new NoTransform("text/javascript")); debugScripts.AddDirectory("~/Scripts/Debug", "*.js"); BundleTable.Bundles.Add(debugScripts); Bundle productionScripts = new Bundle("~/ProductionScripts", new NoTransform("text/javascript")); productionScripts.AddDirectory("~/Scripts/Minified", "*.js"); BundleTable.Bundles.Add(productionScripts);

Con eso en su lugar, simplemente puedo agregar una de dos líneas en mi _layouts.cshtml :

<script src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/DebugScripts")" type="text/javascript"></script> <script src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/ProductionScripts")" type="text/javascript"></script>

Por supuesto, podríamos poner un poco más funky con esto en su lugar. Podríamos generar un solo paquete y, dependiendo del tipo de compilación, seleccionar qué archivos incluir.