¿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.

Paul D. Waite
fuente
20
Arrestado. He estado leyendo 'Cómo hacer amigos e influir en las personas'. Aunque no lo suficientemente cerca .
Paul D. Waite
17
Todos ustedes son raros. SOMOS inteligentes, competentes y curiosamente guapos.
Chuck Le Butt
2
Ver también: stackoverflow.com/q/65491/85414
mahalie
3
+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.

compañero
fuente
44
Agregando a esto, aquí hay un Makefile que descargará el Compresor YUI, empaquetará sus archivos y los minificará. github.com/balupton/jquery-sparkle/blob/…
balupton
@ 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.
Tamik Soziev
45

También hay un puerto .NET de YUI Compressor que le permite: -

  • integrar la combinación de minificación / archivo en eventos posteriores a la compilación de Visual Studio
  • integrarse en una compilación TFS (incluido CI)
  • si desea utilizar los dll en su propio código (por ejemplo, minificación sobre la marcha).

ACTUALIZACIÓN 2011: Y ahora también está disponible a través de NuGet :)

Pure.Krome
fuente
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.

artlung
fuente
2
+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.

silencio
fuente
2
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.
Paul D. Waite
reduzca CSS en línea con CSSO: css.github.io/csso/csso.html
tomByrer
Al menos es uno de los dos recomendados por Google PageSpeed ​​Insights .
Alex Vang
8

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

Peter Bengtsson
fuente
6

Si está buscando una herramienta en línea, intente esto: https://csscompressor.net/

miguelSantirso
fuente
1
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.
Brandon
4

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 .

Kerido
fuente
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.
Kerido
4

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).

Andrzej Duś
fuente
¿Cómo lo usas en Windows? perdona mi ignorancia
user2513846
3

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.

bcosca
fuente
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.

John Michel
fuente
Lo probé #test { padding: 1em; width: 10em; } #test { padding: 2em; }y falló.
drdaeman
@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

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

Andrés
fuente
3

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).

Claudiu
fuente
2

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 )

Jonathan Stanton
fuente
2

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.

BT
fuente
Tiene errores En situaciones específicas, rompe el código js perfectamente bueno
brunoais
1

Ejemplo de C #:

css = css.Replace("\n", "");
css = Regex.Replace(css, @"\s+", " ");
css = Regex.Replace(css, @"\s*:\s*", ":");
css = Regex.Replace(css, @"\s*\,\s*", ",");
css = Regex.Replace(css, @"\s*\{\s*", "{");
css = Regex.Replace(css, @"\s*\}\s*", "}");
css = Regex.Replace(css, @"\s*\;\s*", ";");
Marcelo Gondim
fuente
1

zbugs.com será una buena herramienta en línea para usted, minimizará su CSS en un solo clic

Tamik Soziev
fuente
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í .

Ben Hughes
fuente
2
Por supuesto; sin embargo, su minificador CSS es YUI Compressor.
Paul D. Waite