MVC4 Beta Minificación y agrupamiento: ordenación de archivos y depuración en el navegador

Question

Comencé a utilizar la agrupación y la minificación incluidas con MVC4 Beta. Tengo algunos problemas con esto:

Por un lado, si utilizo el paquete clásico <script src="Folder/js" type="text/javascript"/>, parece que tengo que cambiar el nombre de mis archivos para asegurarme de que están empaquetados en el orden correcto.

• Digamos que tengo tres archivos javascript: "ants.js", "", "bugs.js insects.js"
• ants.js depende de bugs.js
• bugs.js depende insects.js
• La agrupación por defecto parece agruparlos en orden alfabético.
• Para que se agrupen correctamente, tengo que cambiarles el nombre a: "0.insects.js", "1.bugs.js", "2.ants.js"
• Eso es realmente hackish y tiene que ser una manera más limpia.

El siguiente problema que tengo es la depuración. Me gusta pasar por el javascript en mis navegadores de prueba, ¿hay alguna forma de desactivar solo la minificación en el modo DEBUG?

EDITAR: Para ser claros, sé que puedo crear paquetes y registrarlos desde C#, parece realmente feo tener que hacerlo de esa manera.

Answer 1

Para obtener temporalmente el uso de salida no miniaturizada este

public class NonMinifyingJavascript : IBundleTransform 
{ 
    public void Process(BundleContext context, BundleResponse bundle) 
    { 
     if(bundle == null) 
     { 
      throw new ArgumentNullException("bundle"); 
     } 

     context.HttpContext.Response.Cache.SetLastModifiedFromFileDependencies(); 

     foreach(FileInfo file in bundle.Files) 
     { 
      HttpContext.Current.Response.AddFileDependency(file.FullName); 
     } 

     bundle.ContentType = "text/javascript"; 
     //base.Process(context, bundle); 
    } 
} 

si querías basado totalmente en un entorno de configuración, imagino que podría crear una IBundle transformar que los delegados a éste o JsMinify dependiendo de su configuración establecer

con el fin de controlar el orden de los archivos JavaScript que necesita para utilizar el BundleFileSetOrdering

var javascriptBundle = new Bundle("~/site/js", new NonMinifyingJavascript()); 

     //controls ordering for javascript files, otherwise they are processed in order of AddFile calls 
     var bootstrapOrdering = new BundleFileSetOrdering("bootstrap"); 
     //The popover plugin requires the tooltip plugin 
     bootstrapOrdering.Files.Add("bootstrap-tooltip.js"); 
     bootstrapOrdering.Files.Add("bootstrap-popover.js"); 
     BundleTable.Bundles.FileSetOrderList.Add(bootstrapOrdering); 
     javascriptBundle.AddDirectory("~/Scripts", "bootstrap-*.js"); 

Answer 2

Me encontré con este mismo problema ayer y no pude encontrar una buena solución con el nuevo espacio de nombres System.Web.Optimization. Hubo algunos enlaces rotos de MSDN, por lo que el hecho de que todo esté en beta significa que puede cambiar, pero estoy divagando ...

Siempre puede cargar los scripts de forma diferente durante el desarrollo que en la producción. Fácil de hacer con un AppSetting:

@if (System.Configuration. 
    ConfigurationManager.AppSettings["BundleResources"] != null) 
{ 
    @* load the css & js using bundles *@ 
} 
else 
{ 
    @* load the css & js files individually*@ 
} 

A continuación, puede activar/desactivar la materia optimización comentando un appSetting en web.config:

<appSettings> 
    ... 
    <!--<add key="BundleResources" value="uhuh" />--> 
    ... 
</appSettings> 

Answer 3

también podrían echar un vistazo a RequestReduce. Agrupa sus scripts y CSS sin ningún tipo de codificación o configuración al observar cómo están distribuidos en su página y agrupando de acuerdo con eso. También le permite turn off bundling and minification a través de web.config o para solicitudes individuales a través de un paramétrico de querystring: RRFilter=disabled.

Answer 4

utilizo el MVC NoTransform predeterminado en lugar del NonMinifyingJavascript propuesto por chrisortman. Hasta donde yo sé, hace lo mismo. Pero aún no es óptimo. Idealmente, quiero una etiqueta de script para cada archivo de script idividual cuando quiero depurar. Esto hace que la depuración sea mucho más fácil con VS11, que me gusta usar (un depurador para poder depurar js y C# en una sesión de depuración). así que creé este pequeño ayudante:

@helper RenderScriptTags(string virtualPath) 
{ 
    if (Minify /* some appsetting */) 
    { 
     <script src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl(virtualPath)"></script> 
    } 
    else 
    { 
     foreach (var file in System.Web.Optimization.BundleResolver.Current.GetBundleContents(virtualPath)) 
     { 
      <script src="@Url.Content(file)"></script> 
     } 
    } 
} 

@RenderScriptTags("~/libraries") 

tengo una sola aplicación página, así que tengo esto en mi archivo principal cshtml, pero puede ser fácilmente generalizado moviendo esto a un método de extensión HtmlHelper. ¡Funciona bien!

Este código también tiene en cuenta la BundleFileSetOrdering Si ha establecido una!