mvc - ASP.NET Bundles cómo desactivar la minificación

bundles asp net mvc 4 (14)

Tengo debug="true" en mi web.config (s) , y simplemente no quiero que mis paquetes sean minimizados, pero nada de lo que hago parece deshabilitarlo. He intentado con enableoptimisations=false , aquí está mi código:

//Javascript bundles.Add(new ScriptBundle("~/bundles/MainJS") .Include("~/Scripts/regular/lib/mvc/jquery.validate.unobtrusive.js*") .Include("~/Scripts/regular/lib/mvc/jquery.validate*") .Include("~/Scripts/regular/lib/bootstrap.js") .IncludeDirectory("~/Scripts/regular/modules", "*.js", true) .IncludeDirectory("~/Scripts/regular/pages", "*.js", true) .IncludeDirectory("~/Scripts/regular/misc", "*.js", true)); //CSS bundles.Add(new StyleBundle("~/bundles/MainCSS") .Include("~/Content/css/regular/lib/bootstrap.css*") .IncludeDirectory("~/Content/css/regular/modules", "*.css", true) .IncludeDirectory("~/Content/css/regular/pages", "*.css", true))

A continuación, le mostramos cómo desactivar la minificación por paquete:

bundles.Add(new StyleBundleRaw("~/Content/foobarcss").Include("/some/path/foobar.css")); bundles.Add(new ScriptBundleRaw("~/Bundles/foobarjs").Include("/some/path/foobar.js"));

Nota: las rutas utilizadas para sus paquetes no deben coincidir con ninguna ruta real en sus compilaciones publicadas, de lo contrario, nada funcionará. También asegúrese de evitar el uso de .js, .css y / o ''.'' y ''_'' en cualquier parte del nombre del paquete. Mantenga el nombre lo más simple y directo posible, como en el ejemplo anterior.

Las clases de ayuda se muestran a continuación. Tenga en cuenta que para hacer que estas clases sean a prueba del futuro, eliminamos quirúrgicamente las instancias de minificación js / css en lugar de usar .clear () y también insertamos una transformación mime-set-setter sin la cual las compilaciones de producción tienen problemas especialmente cuando se trata de entregar correctamente los paquetes css (paquetes css de rechazo de firefox y cromo con el tipo mime configurado en "text / html" que es el predeterminado):

internal sealed class StyleBundleRaw : StyleBundle { private static readonly BundleMimeType CssContentMimeType = new BundleMimeType("text/css"); public StyleBundleRaw(string virtualPath) : this(virtualPath, cdnPath: null) { } public StyleBundleRaw(string virtualPath, string cdnPath) : base(virtualPath, cdnPath) { Transforms.Add(CssContentMimeType); //0 vital Transforms.Remove(Transforms.FirstOrDefault(x => x is CssMinify)); //0 } //0 the guys at redmond in their infinite wisdom plugged the mimetype "text/css" right into cssminify upon unwiring the minifier we // need to somehow reenable the cssbundle to specify its mimetype otherwise it will advertise itself as html and wont load } internal sealed class ScriptBundleRaw : ScriptBundle { private static readonly BundleMimeType JsContentMimeType = new BundleMimeType("text/javascript"); public ScriptBundleRaw(string virtualPath) : this(virtualPath, cdnPath: null) { } public ScriptBundleRaw(string virtualPath, string cdnPath) : base(virtualPath, cdnPath) { Transforms.Add(JsContentMimeType); //0 vital Transforms.Remove(Transforms.FirstOrDefault(x => x is JsMinify)); //0 } //0 the guys at redmond in their infinite wisdom plugged the mimetype "text/javascript" right into jsminify upon unwiring the minifier we need // to somehow reenable the jsbundle to specify its mimetype otherwise it will advertise itself as html causing it to be become unloadable by the browsers in published production builds } internal sealed class BundleMimeType : IBundleTransform { private readonly string _mimeType; public BundleMimeType(string mimeType) { _mimeType = mimeType; } public void Process(BundleContext context, BundleResponse response) { if (context == null) throw new ArgumentNullException(nameof(context)); if (response == null) throw new ArgumentNullException(nameof(response)); response.ContentType = _mimeType; } }

Para que todo esto funcione, debes instalarlo (a través de nuget):

WebGrease 1.6.0+ Microsoft.AspNet.Web.Optimization 1.1.3+

Y su web.config debería enriquecerse así:

Tenga en cuenta que es posible que tenga que tomar medidas adicionales para que sus css-bundles funcionen en términos de fuentes, etc. Pero esa es una historia diferente.

Busque la palabra clave EnableOptimizations en su proyecto

Entonces si encuentras

BundleTable.EnableOptimizations = true;

convertirlo en false .

Combiné algunas respuestas dadas por otros en esta pregunta para encontrar otra solución alternativa.

Objetivo: agrupar siempre los archivos, deshabilitar la minificación de JS y CSS en el caso de que <compilation debug="true" ... /> y aplicar siempre una transformación personalizada al paquete de CSS.

Mi solución :

1) En web.config : <compilation debug="true" ... />

2) En el método Global.asax Application_Start () :

protected void Application_Start() { ... BundleTable.EnableOptimizations = true; // Force bundling to occur // If the compilation node in web.config indicates debugging mode is enabled // then clear all transforms. I.e. disable Js and CSS minification. if (HttpContext.Current.IsDebuggingEnabled) { BundleTable.Bundles.ToList().ForEach(b => b.Transforms.Clear()); } // Add a custom CSS bundle transformer. In my case the transformer replaces a // token in the CSS file with an AppConfig value representing the website URL // in the current environment. E.g. www.mydevwebsite in Dev and // www.myprodwebsite.com in Production. BundleTable.Bundles.ToList() .FindAll(x => x.GetType() == typeof(StyleBundle)) .ForEach(b => b.Transforms.Add(new MyStyleBundleTransformer())); ... }

Combina varias respuestas, esto funciona para mí en ASP.NET MVC 4.

bundles.Add(new ScriptBundle("~/Scripts/Common/js") .Include("~/Scripts/jquery-1.8.3.js") .Include("~/Scripts/zizhujy.com.js") .Include("~/Scripts/Globalize.js") .Include("~/Scripts/common.js") .Include("~/Scripts/requireLite/requireLite.js")); bundles.Add(new StyleBundle("~/Content/appLayoutStyles") .Include("~/Content/AppLayout.css")); bundles.Add(new StyleBundle("~/Content/css/App/FunGrapherStyles") .Include("~/Content/css/Apps/FunGrapher.css") .Include("~/Content/css/tables.css")); #if DEBUG foreach (var bundle in BundleTable.Bundles) { bundle.Transforms.Clear(); } #endif

Esto puede ser útil para alguien en el futuro ya que el nuevo marco, cuando se configura a través de VS, obtiene un predeterminado web.config , web.Debug.config y web.Release.config . En la web.release.config encontrarás esta línea:

<compilation xdt:Transform="RemoveAttributes(debug)" />

esto parecía anular cualquier cambio en línea que hice. Comenté esta línea y fuimos gravy (en términos de ver código no minificado en una compilación de "lanzamiento")

Intenté muchas de estas sugerencias pero al parecer funcionó. He desperdiciado bastantes horas solo para descubrir que este fue mi error:

@Scripts.Render("/bundles/foundation")

Siempre me ha minificado y incluido javascript, sin importar lo que intenté. En cambio, debería haber usado esto:

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

El extra ''~'' lo hizo. Incluso lo eliminé nuevamente en una sola instancia para ver si realmente era eso. Fue ... espero que pueda salvar al menos a una persona las horas que perdí en esto.

Las directivas de compilación condicional son su amigo:

#if DEBUG var jsBundle = new Bundle("~/Scripts/js"); #else var jsBundle = new ScriptBundle("~/Scripts/js"); #endif

Para deshabilitar la agrupación y la minificación, simplemente ponga este archivo .aspx (esto deshabilitará la optimización, incluso si debug=true en web.config )

vb.net:

System.Web.Optimization.BundleTable.EnableOptimizations = false

c # .net

System.Web.Optimization.BundleTable.EnableOptimizations = false;

Si coloca EnableOptimizations = true esto EnableOptimizations = true y minimizará incluso si debug=true en web.config

Puedes desactivar la minificación en tus paquetes simplemente borrando tus transformaciones.

var scriptBundle = new ScriptBundle("~/bundles/scriptBundle"); ... scriptBundle.Transforms.Clear();

Personalmente, me pareció útil cuando quería agrupar todos mis scripts en un solo archivo, pero necesitaba legibilidad durante las fases de depuración.

Si está utilizando la transformación CSS LESS / SASS, hay una opción useNativeMinification que se puede establecer en falso para deshabilitar la minificación (en web.config). Para mis propósitos, simplemente lo cambio aquí cuando lo necesito, pero podría usar las transformaciones de web.config para habilitarlo siempre en la versión de lanzamiento o tal vez encontrar una manera de modificarlo en el código.

<less useNativeMinification="false" ieCompat="true" strictMath="false" strictUnits="false" dumpLineNumbers="None">

Consejo: El objetivo de esto es ver su CSS, lo que puede hacer en las herramientas de inspección del navegador o simplemente abriendo el archivo. Cuando la agrupación está habilitada, el nombre de archivo cambia en cada compilación, por lo que pongo lo siguiente en la parte superior de la página para poder ver mi CSS compilado fácilmente en una nueva ventana del navegador cada vez que cambia.

@if (Debugger.IsAttached) { <a href="@Styles.Url(ViewBag.CSS)" target="css">View CSS</a> }

Esta será una URL dinámica, algo así como https://example.com/Content/css/bundlename?v=UGd0FjvFJz3ETxlNN9NVqNOeYMRrOkQAkYtB04KisCQ1

Actualización: Creé una transformación web.config para establecerla en true para mí durante la implementación / lanzamiento.

<bundleTransformer xmlns="http://tempuri.org/BundleTransformer.Configuration.xsd"> <less xdt:Transform="Replace" useNativeMinification="true" ieCompat="true" strictMath="false" strictUnits="false" dumpLineNumbers="None"> <jsEngine name="MsieJsEngine" /> </less> </bundleTransformer>

Si establece la siguiente propiedad en falso, deshabilitará tanto la agrupación como la minificación.

En Global.asax.cs

protected void Application_Start() { System.Web.Optimization.BundleTable.EnableOptimizations = false; }

Si tiene debug="true" en web.config y está utilizando Scripts/Styles.Render para hacer referencia a los paquetes en sus páginas, eso debería desactivar el agrupamiento y la minificación. BundleTable.EnableOptimizations = false siempre desactivará tanto la agrupación como la minificación (independientemente del indicador de depuración verdadero / falso).

¿Quizás no estés usando los Scripts/Styles.Render helpers? Si está directamente representando referencias al paquete a través de BundleTable.Bundles.ResolveBundleUrl() , siempre obtendrá el contenido minificado / incluido.

Solo para complementar las respuestas ya dadas, si también quiere NO miniaturizar / ofuscar / concatenar ALGUNOS archivos mientras permite la agrupación completa y la minificación para otros archivos, la mejor opción es ir con un renderizador personalizado que leerá el contenido de un paquete en particular. (s) y renderiza los archivos en la página en lugar de renderizar la ruta virtual del paquete. Personalmente requirí esto porque IE 9 estaba $ *% @ ing la cama cuando mis archivos CSS se incluían, incluso con la minificación desactivada .

Muchas gracias a este artículo , que me dio el punto de partida para el código que utilicé para crear un Renderer de CSS que representaría los archivos para el CSS, pero aún permitiría que el sistema renderizara mis archivos de javascript agrupados / minificados / ofuscados.

Creó la clase de ayudante estático:

using System; using System.Text; using System.Web; using System.Web.Mvc; using System.Web.Optimization; namespace Helpers { public static class OptionalCssBundler { const string CssTemplate = "<link href=/"{0}/" rel=/"stylesheet/" type=/"text/css/" />"; public static MvcHtmlString ResolveBundleUrl(string bundleUrl, bool bundle) { return bundle ? BundledFiles(BundleTable.Bundles.ResolveBundleUrl(bundleUrl)) : UnbundledFiles(bundleUrl); } private static MvcHtmlString BundledFiles(string bundleVirtualPath) { return new MvcHtmlString(string.Format(CssTemplate, bundleVirtualPath)); } private static MvcHtmlString UnbundledFiles(string bundleUrl) { var bundle = BundleTable.Bundles.GetBundleFor(bundleUrl); StringBuilder sb = new StringBuilder(); var urlHelper = new UrlHelper(HttpContext.Current.Request.RequestContext); foreach (BundleFile file in bundle.EnumerateFiles(new BundleContext(new HttpContextWrapper(HttpContext.Current), BundleTable.Bundles, bundleUrl))) { sb.AppendFormat(CssTemplate + Environment.NewLine, urlHelper.Content(file.VirtualFile.VirtualPath)); } return new MvcHtmlString(sb.ToString()); } public static MvcHtmlString Render(string bundleUrl, bool bundle) { return ResolveBundleUrl(bundleUrl, bundle); } } }

Luego, en el archivo de diseño de la maquinilla de afeitar:

@OptionalCssBundler.Render("~/Content/css", false)

en lugar del estándar:

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

Estoy seguro de que la creación de un renderizador opcional para los archivos javascript también necesitaría poca actualización para este asistente.

También hay una forma simple de controlar la minificación (y otras características) manualmente. Es el nuevo transformador CssMinify () usando, como este:

// this is in case when BundleTable.EnableOptimizations = false; var myBundle = new StyleBundle("~/Content/themes/base/css") .Include("~/Content/themes/base/jquery.ui.core.css" /* , ... and so on */); myBundle.Transforms.Add(new CssMinify()); bundles.Add(myBundle); // or you can remove that transformer in opposite situation myBundle.Transforms.Clear();

Eso es conveniente cuando desea tener algunos paquetes de piezas especiales solo para minimizarlos. Digamos que está utilizando algunos estilos estándar (jQuery), que se están poniendo de moda (requiriéndoles un montón de solicitudes excesivas de navegador), pero quiere mantener su propia hoja de estilo sin modificar. (Lo mismo - con javascript).