¿Alguna recomendación para un minificador CSS? [cerrado]
289
¿Alguna recomendación para un minificador CSS?
Voy a buscar en Google y probar algunos, pero sospeché que la comunidad inteligente, competente y curiosamente atractiva de StackOverflow ya podría haber evaluado los pros y los contras de los pesos pesados.
+1 solo por comprender la 'naturaleza cambiante' de las cosas por aquí, y comprender y explicar el razonamiento para cerrar preguntas como esta, ¡aunque sea tuyo! ;)
Andrew Barber
Respuestas:
98
El compresor YUI es fantástico. Funciona en JavaScript y CSS. Echale un vistazo.
@ JuniorMayhé Lo utilicé y mis estilos se estropearon por completo, aunque había marcado "Solo minimizar, sin ofuscación de símbolos". opción) ... lamentablemente cada minificador que intento siempre rompe mis estilos. ¿Es porque los minificadores en línea son basura? No debería ser así.
dialex
1
@DiAlex Entiendo que muchos de ellos se meten con nuestro código, debemos usarlos con cuidado, siempre eligiendo un enfoque "conservador" y no la refactorización agresiva. Un conservador solo eliminaría espacios innecesarios, puntos y comas finales, estilos duplicados, etc. Creo que estos minificadores pueden dañar fácilmente un estilo si usamos algunos hacks css dentro del código css. Las barras invertidas y los símbolos extraños podrían volver loco al compresor.
Junior Mayhé
Puede probar el servicio en línea zbugs.com : utiliza el compresor yui para minimizar sus archivos.
Estoy un poco confundida. YUI Compressor está en desuso a favor de UglifyJS ( demo ). ¿Tiene sentido trabajar en un puerto .NET?
Martin Vseticka
Compañero. Comencé ese puerto en 2008 más o menos. Eso es hace 6 años impares. También publiqué esta respuesta en '09. Así que por favor verifique las fechas y obtenga un contexto antes de preguntar preguntas tontas. Ahora, sal y juega un poquito :)
Pure.Krome
Pure.Krome: Ruego diferir. He mirado el repositorio de GitHub y tiene unos meses y los compromisos son de este año. Por eso pregunté. "Compañero".
Martin Vseticka
: aplauso lento: bien visto! en realidad tienes razón --- oh. Espere. Comencé el proyecto en codeplex: yuicompressor.codeplex.com . Primero confirme el 7 de julio de 2008 ( yuicompressor.codeplex.com/SourceControl/changeset/… ). Luego lo mudé a GH este año . No he hecho ningún trabajo en portarlo durante mucho tiempo. Solo ha habido algunas correcciones de errores extraños aquí y allá. Entonces. Tipo. Lo porto ED . No puerto ing ella. Está en modo de mantenimiento. QED
Pure.Krome
1
Usted también :) Y felicite por el enlace a UglifyJS, que era algo que quería comprobar para ver si podemos usarlo en el trabajo, ¡y nos lo ha recordado! saludos :)
Pure.Krome
19
Me gusta Minify . En PHP y funciona con CSS o JavaScript.
+1 para Minify. Si ya está familiarizado con PHP, puede estar más cómodo instalándolo. Requiere PHP5. Una vez que lo haya configurado, puede olvidarse de él, trabajar con normalidad en tantos archivos css o js super espacios en blanco y comentados como desee y minify los comprimirá sobre la marcha.
mahalie
13
CSSO es actualmente el mejor minificador / optimizador.
No sé sobre "el mejor", pero vale la pena echarle un vistazo.
Paul D. Waite
Solo pruébalo y encontrarás que es lo mejor. No hay análogos para sus técnicas de minificación para este momento, como sé.
silencioso
1
Muy bien, he comparado CSSO con YUI Compressor en un archivo de prueba de 30 KB, y después de comprimir la salida comprimida de ambas herramientas, CSSO gana, habiendo comprimido el archivo en 7 bytes adicionales. Sin embargo, ese es solo un archivo de prueba, por supuesto.
Si usa Python, le recomendaría más delgado, que probablemente no sea tan rápido como YUI Compressor, pero a diferencia de csscompressor.net, no se ahoga con los hacks CSS.
Estoy sesgado ya que escribí más delgado y actualmente estoy evaluando YUI Compressor para ver cómo maneja los hacks. Se puede ver un ejemplo de adelgazamiento en acción si ve la fuente de crosstips.org
Desearía poder rechazar esta respuesta (ya es demasiado tarde después de haberla votado). Estoy tratando de comprimir mi CSS y rompe las cosas. Eso no es bueno en absoluto. Advertencia para todos, creo que a menos que tenga un CSS impecable que cumpla con los estándares, ¡podría romper su mierda!
BT
19
Pero, ¿no deberías tener un CSS impecable que cumpla con los estándares?
Chuck Le Butt el
2
si está utilizando HTML5 repetitivo, no.
SkaveRat
Buena herramienta Lo probé html{width:100%;height:100%;} body{width:100%;height:100%;padding:0;} #test{padding:1em;width:10em;} #test{padding:2em;}y funcionó mejor que YUI Compressor (que no eliminó los duplicados para el relleno de # test). Aún así, ambos no pudieron satisfacerme html,body{width:100%;height:100%}body{padding:0}(lo cual, en mi opinión, es equivalente, ya que ambos selectores tienen la misma especificidad).
drdaeman
CSS es la única cosa en la que a veces se aceptan hacks de mierda. Algunos de esos hacks usan trucos de comentarios extraños que la minificación puede romper.
Opción de aspecto agradable. Sin embargo, una consulta: usted dijo: “De acuerdo con la especificación CSS, se admiten dos tipos de cadenas: comillas simples y comillas dobles. Mi algoritmo deja la cadena intacta, incluso si se encuentran caracteres de espacio en blanco dentro de ella ... Creo que mantener la cadena sin modificar es más intuitivo y profesional ". ¿Seguramente se deben eliminar los caracteres de espacio que no agreguen significado para que el archivo de salida sea lo más pequeño posible? ¿No es ese el punto de minificación?
Paul D. Waite
3
Bueno, en mi opinión esto seguramente es correcto en un caso general. Pero considero que las cuerdas son un caso especial. Depende del desarrollador del CSS original eliminar o no los espacios en blanco sin sentido de las cadenas. El algoritmo que estoy mostrando simplemente sigue la especificación manteniendo la cadena sin modificar.
Fat Free Framework es GPL y, por lo tanto, supongo que esta parte de su código también lo es. Solo un aviso.
CodeReaper el
Tiene errores: S mala idea.
brunoais
3
Me parece que CSS SuperScrub de isnoop funciona muy bien. Sin embargo, solo puede manejar enlaces directos a CSS en línea: / Puede evitar eso utilizando su servicio de pastebin preferido para mantener el código CSS y simplemente dando SuperScrub el enlace sin procesar.
@drdaeman Eso es probablemente porque no sabe qué hacer con valores en conflicto / duplicados para un selector dado. Como no mantengo SuperScrub, no puedo decirte cuándo o si eso se solucionará.
John Michel
3
Si su sitio está en ASP.NET, puede dejar que su sitio haga la minificación CSS sobre la marcha (para que no tenga que hacerlo manualmente cada vez que realice un cambio). Por ejemplo con esto:
Otros han mencionado YUI Compressor, luego el puerto .NET del mismo, y agregaré otro enlace a la cadena. StyleManager es un control de servidor que envuelve el puerto .NET de YUI Compressor para que pueda usarlo tal como está acostumbrado a usar ScriptManager. También agrega un montón de otras características agradables, como constantes CSS, resolución tilde (~) con sus definiciones de imagen de fondo, etc. Es estricto, bien documentado, y lo he usado en todos mis proyectos recientes con o un problema. Compruébalo - gStyleManager.com
Todavía "en beta", pero debería funcionar bastante bien. Utilizo el código detrás de él en cada proyecto: http://claudiu.phpfogapp.com/ Está construido en PHP y también aloja su archivo * .css durante una cantidad de tiempo bastante grande, seguramente suficiente para que pueda probar su código con el minss css. (Solo eliminaría viejos archivos css si el espacio se llena en el servidor).
Hay un proyecto codeplex que se conectará a sitios web .net que minimizará y comprimirá los archivos CSS y JS. También hay una comparación entre el Microsoft AJAX Minifier y el YUI Compressor que muestra que el YUI está saliendo un poco mejor. Hay una variación adicional que combina el Microsoft Minifier y la compresión que redujo drásticamente el archivo.
Claro, aunque no creo que haya muchos minificadores que requieran más de un clic para iniciarlos.
Paul D. Waite
Tienes razón Paul :) pero este hace mucho más que solo minificar, y todo en un solo clic
Tamik Soziev
1
Eche un vistazo al último HTML5BoilerPlate de Paul Irish: contiene un script de compilación para minimizar todos sus activos (incluidos PNG y JPG). Puedes ver un video de demostración aquí .
Respuestas:
El compresor YUI es fantástico. Funciona en JavaScript y CSS. Echale un vistazo.
fuente
También hay un puerto .NET de YUI Compressor que le permite: -
ACTUALIZACIÓN 2011: Y ahora también está disponible a través de NuGet :)
fuente
Me gusta Minify . En PHP y funciona con CSS o JavaScript.
fuente
CSSO es actualmente el mejor minificador / optimizador.
fuente
Si usa Python, le recomendaría más delgado, que probablemente no sea tan rápido como YUI Compressor, pero a diferencia de csscompressor.net, no se ahoga con los hacks CSS.
Estoy sesgado ya que escribí más delgado y actualmente estoy evaluando YUI Compressor para ver cómo maneja los hacks. Se puede ver un ejemplo de adelgazamiento en acción si ve la fuente de crosstips.org
fuente
Echa un vistazo a CSSTidy: http://csstidy.sourceforge.net/usage.php
Y en línea en: http://cdburnerxp.se/cssparse/css_optimiser.php
fuente
Si está buscando una herramienta en línea, intente esto: https://csscompressor.net/
fuente
html{width:100%;height:100%;} body{width:100%;height:100%;padding:0;} #test{padding:1em;width:10em;} #test{padding:2em;}
y funcionó mejor que YUI Compressor (que no eliminó los duplicados para el relleno de # test). Aún así, ambos no pudieron satisfacermehtml,body{width:100%;height:100%}body{padding:0}
(lo cual, en mi opinión, es equivalente, ya que ambos selectores tienen la misma especificidad).He escrito un minificador CSS ultra rápido en C #. Sin embargo, el algoritmo no maneja Javascript. Tu esto: http://www.ko-sw.com/Blog/post/An-Ultra-Fast-CSS-Minify-Algorithm.aspx .
fuente
Pruebe las hojas de estilo de cierre .
Además de la minificación , también admite linting , cambio de RTL y cambio de nombre de clase .
También puede agregar variables , funciones , condicionales y mixins. a CSS.
También tenga en cuenta que algunas de estas características dependen del resto de las herramientas de cierre (que son muy potentes por sí mismas).
fuente
Si está buscando algo en PHP, aquí está el enlace:
Minify sin grasa
Aunque es parte del PHP Fat-Free Framework, también se puede usar de forma independiente.
fuente
Me parece que CSS SuperScrub de isnoop funciona muy bien. Sin embargo, solo puede manejar enlaces directos a CSS en línea: / Puede evitar eso utilizando su servicio de pastebin preferido para mantener el código CSS y simplemente dando SuperScrub el enlace sin procesar.
fuente
#test { padding: 1em; width: 10em; } #test { padding: 2em; }
y falló.Si su sitio está en ASP.NET, puede dejar que su sitio haga la minificación CSS sobre la marcha (para que no tenga que hacerlo manualmente cada vez que realice un cambio). Por ejemplo con esto:
http://www.codeproject.com/KB/aspnet/CombineAndMinify.aspx
fuente
Perl tiene CSS :: Minifier (y una versión XS para mayor velocidad).
fuente
Otros han mencionado YUI Compressor, luego el puerto .NET del mismo, y agregaré otro enlace a la cadena. StyleManager es un control de servidor que envuelve el puerto .NET de YUI Compressor para que pueda usarlo tal como está acostumbrado a usar ScriptManager. También agrega un montón de otras características agradables, como constantes CSS, resolución tilde (~) con sus definiciones de imagen de fondo, etc. Es estricto, bien documentado, y lo he usado en todos mis proyectos recientes con o un problema. Compruébalo - gStyleManager.com
fuente
Todavía "en beta", pero debería funcionar bastante bien. Utilizo el código detrás de él en cada proyecto: http://claudiu.phpfogapp.com/ Está construido en PHP y también aloja su archivo * .css durante una cantidad de tiempo bastante grande, seguramente suficiente para que pueda probar su código con el minss css. (Solo eliminaría viejos archivos css si el espacio se llena en el servidor).
fuente
Hay un proyecto codeplex que se conectará a sitios web .net que minimizará y comprimirá los archivos CSS y JS. También hay una comparación entre el Microsoft AJAX Minifier y el YUI Compressor que muestra que el YUI está saliendo un poco mejor. Hay una variación adicional que combina el Microsoft Minifier y la compresión que redujo drásticamente el archivo.
De todos modos, el enlace es http://xpedite.codeplex.com/wikipage?title=Minifier%20(CSS%2FJavaScript%20Minification%20Handlers )
fuente
Así es como lo hice para MVC3: http://mkramar.blogspot.com/2011/08/css-and-javascript-minify-and-combine.html La belleza de este enfoque es que lo hace todo sobre la marcha y no tiene que procesar previamente los archivos manualmente o configurar la postcompilación.
fuente
Una herramienta en línea (mucho mejor que www.csscompressor.net que aumentó mi CSS): http://www.cssdrive.com/compressor/compress.php hace un excelente trabajo.
fuente
Ejemplo de C #:
fuente
zbugs.com será una buena herramienta en línea para usted, minimizará su CSS en un solo clic
fuente
Eche un vistazo al último HTML5BoilerPlate de Paul Irish: contiene un script de compilación para minimizar todos sus activos (incluidos PNG y JPG). Puedes ver un video de demostración aquí .
fuente