varias una selectores regla que para mismo misma los estilo diferentes cómo clases child atributos aplique aplicar agrupan html css compression

html - una - selector padre css



Antes de la implementación, ¿hay alguna herramienta para comprimir el atributo de clase HTML y los selectores de CSS? (7)

En el proyecto actual, me pidieron comprimir el atributo de clase HTML y los selectores de CSS correspondientes antes de la implementación . Por ejemplo, el código de producción es :

<div class="foo"> <div id="bar"></div> </div> .foo {/*Style goes here*/} #bar {/*Style goes here*/}

En la implementación , quiero que la clase HTML y los selectores de CSS correspondientes sean sustituidos:

<div class="a"> <div id="b"></div> </div> .a {/*Style goes here*/} #b {/*Style goes here*/}

¿Cuáles son las herramientas disponibles para archivar esta compresión?

Esto es increíblemente corto de miras.

  • Paso 1: activar la compresión GZip o Zlib en el servidor web
  • Paso 2: todo el texto se comprime, a menudo en un 70% o más
  • Paso 3: No hay paso 3.
  • Paso 4: GANANCIA

No hay nada de malo en la minificación con gzipping, incluso antes de que los navegadores modernos introdujeran los mapas fuente, la minificación era una mejor práctica porque aún se pueden obtener ahorros significativos incluso cuando se usa junto con gzipping. Pusimos peor lectura en la producción porque la mejora en el rendimiento valió la pena. Ahora con los mapas fuente, podemos tener nuestro pastel y comérselo también. Aquí hay un buen artículo que demuestra los efectos de combinar la minificación con gzip en páginas html para sitios grandes: http://madskristensen.net/post/effects-of-gzipping-vs-minifying-html-files

La diferencia de ahorro que obtienes varía en gran medida dependiendo de la distribución de glifos del código que se está minificando, por lo que los resultados variarán dependiendo de la estrategia de minificación y del idioma que se está minificando, e incluso solo dependiendo del estilo de codificación. En el caso promedio, los ahorros aún son significativos.

La minificación maneja más que solo glifos de condensación, también puede reestructurar el código para eliminar caracteres innecesarios mientras se logra el mismo efecto, algo que gzipping no puede hacer.

Ahora, para volver a su pregunta específica, en su caso, desea minificar los glifos de clase. Esto es más difícil de hacer por varias razones. El alcance de esos glifos se encuentra entre varios archivos, a diferencia de que es posible delimitarlos a partes locales de un archivo. Al minimizar javascript, las variables de alcance global no se reemplazan de manera predeterminada porque pueden ser necesarias en otro script, pero con CSS, no se sabe qué clases son locales y cuáles pueden definirse en otro archivo. Para empeorar las cosas, también necesitas sincronizar el reemplazo de la clase con javascript, ya que es muy común encontrar elementos DOM en el código a través de las clases. Sería imposible sincronizar esto, ya que las clases pueden construirse dinámicamente en javascript, e incluso sin ese problema, sería una gran prueba. Solo puede sincronizar el reemplazo de glifos en javascript si cambia su estilo de codificación para asegurarse de identificar explícitamente dónde se están utilizando las cadenas de clase css: https://code.google.com/p/closure-stylesheets/#Renaming

Afortunadamente, el reemplazo de glifos es lo que hace la minificación que gzipping también lo hace muy bien, por lo que el ahorro de tamaño de esa estrategia de minificación particular es mucho menor que las otras estrategias que eliminan glifos por completo.

Para css hay un compresor YUI . Eliminará el espacio en blanco innecesario y convertirá sus propiedades en taquigrafía si aún no lo usa. En cuanto a html, no conozco ninguno, pero recuerde que recortar el espacio en blanco en html no siempre es seguro.

Si realmente quieres cambiar el nombre de las clases (teniendo en cuenta lo que dijo Madmartigan), Google Closure Stylesheets lo hace. Es una exageración, y el compresor YUI o cualquier otra herramienta de minificación + gzipping debería darte suficiente impulso en el rendimiento, pero puede hacerlo. Deberá usar otras herramientas de Cierre para realizar los cambios apropiados en sus archivos .js y plantillas html.

También hay gulp-selectors .

Instalarlo:

npm install gulp gulp-selectors

Ahora un script de node rápido y sucio:

var gulp = require(''gulp''); var gs = require(''gulp-selectors''); gulp .src([''*.html'', ''*.css'']) .pipe(gs.run({}, ''{ids: "*"}'')) .pipe(gulp.dest(''.''))''

El segundo argumento para gs.run() es que deje IDs tal cual, vea también su sitio web: gulp-selectors