comprimiendo archivos .js y .css al presionar el sitio web

Question

Ni siquiera estoy seguro de si algo como yo quiero es posible, así que les pido que me digan si alguien hizo eso antes. Entonces, mi objetivo es cuando hago clic en el sitio web "Publicar" en VS2010, para tener todos los archivos javascript comprimidos en uno, lo mismo con css y luego en mi archivo de diseño cambiar las referencias de todos los archivos js y css diferentes a solo esos dos fusionados unos. ¿Eso es factible? O tal vez es factible, pero de una manera más manual?

Por supuesto, el objetivo aquí es tener solo dos llamadas a archivos externos en el sitio web, pero cuando lo desarrolle, necesito ver todos los archivos para poder trabajar con él. Supongo que podría hacerlo manualmente antes de cada inserción, pero prefiero que se haga automáticamente usando algún script o algo. No intenté nada todavía, y no estoy buscando una solución preparada, solo estoy buscando conocer mejor el problema y tal vez algunos consejos.

¡Muchas gracias!

Answer 1

Esto está integrado en ASP.net 4.5. Pero mientras tanto, usted debe buscar en los siguientes proyectos

• YUI Compressor
  • El objetivo de este proyecto es el de comprimir cualquier hoja de Javascript y el estilo en cascada a un nivel eficiente que funciona exactamente como la fuente original antes de que se minimizara
• Cassette
  • cassette ordena automáticamente, concatena, le resta, cachés y versiones de todo el JavaScript, CoffeeScript, CSS, MENOS y plantillas HTML.
• RequestReduce
  • simple estupendo Auto spriting, Minificación y Agrupación solución
  • No hay necesidad de decir RequestReduce donde sus recursos son
  • Su CSS y JavaScript puede estar en cualquier lugar - incluso en un host externo
  • RequestReduce los encuentra en tiempo de ejecución automáticamente
• SquishIt
  • Squish Te permite aplastar JavaScript y CSS. Y también algo de LESS y CoffeeScript.
• Combres
  • biblioteca .NET que permite minimización, la compresión, la combinación y el almacenamiento en caché de JavaScript y CSS recursos para aplicaciones web ASP.NET y ASP.NET MVC. En pocas palabras, ayuda a que sus aplicaciones se clasifiquen mejor con YSlow y PageSpeed.
• Chirpy
  • purés, le resta, y valida su código JavaScript, hojas de estilo y archivos sin punto. Chirpy también puede actualizar automáticamente T4MVC y otras plantillas T4.

de Scott Hanselman escribió a good overview blog post acerca de este tema hace un tiempo.

Answer 2

Eche un vistazo a YUI compressor @ codeplex.com esto podría ser realmente útil.

Answer 3

Lo que he hecho antes es configurar post-build event, haga que ejecute un archivo por lotes simple que minimice sus archivos de origen. Entonces, si está en modo de lanzamiento (no en modo de depuración), haría referencia a los archivos fuente minimizados. http://www.west-wind.com/weblog/posts/2007/Jan/19/Detecting-ASPNET-Debug-mode

Answer 4

No sé si hay alguna manera posible de enganchar la funcionalidad de ese botón 'Publicar'/lo que sea, pero seguramente es posible tener ese tipo de 'proceso de compilación estático'.

Personalmente estoy usando Apache ANT para escribir exactamente lo que usted ha descrito allí. Así que está desarrollando en sus archivos js/html/css sin comprimir y cuando termine, llame al ant build que luego minimiza, comprime, distribuye y publica toda su aplicación web.

Ejemplo de script: https://github.com/jAndreas/typeof-NaN-2.0/blob/master/build/build.xml

Answer 5

no he oído hablar de publicar minimización. Creo que el uso debería elegir entre la minificación dinámica como SquishIt o el tiempo de compilación como YuiCompressor o AjaxMinifier.

Prefiero el tiempo de compilación. No creo que sea muy crítico tener que compilar archivos que cambian el tiempo. Si tiene líneas de código css/js grandes, puede elegir esta acción solo para la compilación de versiones y si ayuda a publicar estos archivos solo en las configuraciones de compilación necesarias.

Answer 6

He votado la respuesta que menciona Cassette pero detallaré esa opción en particular un poco más. Casete es bastante configurable, pero bajo la opción más común, que permite hacer referencia a los recursos CSS y Javascript través de la sintaxis como esta:

Bundles.Reference("Scripts/aFolderOfScriptsThatNeedsToLoadFirst", "first"); 
Bundles.Reference("Scripts/aFolderOfScripts"); 
Bundles.Reference("Styles/aFolderOfStyles"); 

A continuación, hacer que estos en sus maestros o de diseño páginas como ésta:

@Bundles.RenderStylesheets() 
@Bundles.RenderScripts("first") 
@Bundles.RenderScripts() 

Durante el desarrollo, sus scripts y estilos se incluirán como archivos individuales, y Cassette intentará ayudarlo detectando cambios e intentando que el navegador los vuelva a cargar. Este enfoque es ideal para depurar en bibliotecas como knockout cuando están haciendo algo que no esperas. Y, la mejor parte, cuando inicie el sitio, simplemente cambie el archivo web.config y Cassette minimizará y combinará todos sus archivos en el menor número posible de paquetes.

Puede encontrar más detalles en su documentación (que es bastante bueno, aunque a veces va a la zaga del desarrollo): http://getcassette.net/documentation/getting-started