Minificación: ¿Cambiar el nombre/acortar los selectores de CSS?

He estado buscando herramientas que minimicen HTML, CSS y JS juntos. Dicho esto, no me refiero solo a la eliminación de espacios en blanco y comentarios, sino también a la reducción de los selectores.

Por ejemplo

<div class="wrapper">
    <div class="sub-header"></div>
</div>

a:

<div class="eD"><div class="qw"></div></div>

Pero no he encontrado ninguno. Y eso está respaldado por el hecho de que la fuente de visualización de sitios populares como GitHub, Reddit e incluso Facebook revela los nombres completos de las clases como "contenedor principal", etc.

Entonces, ¿hay alguna herramienta que haga lo que quiero?

Tendría que tener un único conjunto de herramientas que podría ser el mejor en su clase para la minimización de HTML, CSS y JS. Y, la parte de JS sería un poco complicada porque si los nombres de las clases alguna vez se construyen con operaciones de cadena, no sería trivial asegurarse de obtenerlos sin falsos positivos. Además, en la mayoría de los casos, el uso real del ancho de banda de una página está dominado por unas pocas imágenes, no por la fuente HTML de la página.
También está el posible problema de legibilidad. Si (en el peor de los casos) nos encontramos con una situación en la que la única copia existente de su código es la implementada, y la ha alterado deliberadamente, será muy difícil trabajar con ella. Por otro lado, hacer esto podría proporcionar cierta ofuscación (muy) leve, supongo.
Si tus procesos de desarrollo pierden la copia maestra y solo te queda la versión implementada, tienes problemas mucho peores que una página web difícil de entender. Las personas usaban el código de objeto implementado todo el tiempo y de alguna manera logran (generalmente) aferrarse a la fuente.

Respuestas (1)

Si todavía está buscando una herramienta que maneje esas cosas. Hay un proyecto llamado "rename-css-selectors" si maneja el código con el nodo:

https://www.npmjs.com/package/rename-css-selectors

También hay un complemento Grunt para ello:

https://www.npmjs.com/package/grunt-rcs

Esto minimizará todos los selectores de CSS en archivos HTML, JS y CSS (en realidad, cualquier archivo que desee). Guardé el 20% del archivo de CSS al final. Pronto se lanzará un Gulpplugin.

EDITAR:

La respuesta anterior es solo la mitad. Para responder completamente a su pregunta, puede combinar diferentes herramientas. Además del rename css selectorspuede usar el minificador HTML de kangax. Con eso ahorras un 30% en archivos HTML:

https://github.com/kangax/html-minificador

También hay un complemento Grunt para ello:

https://github.com/gruntjs/grunt-contrib-htmlmin

O incluso tragar:

https://www.npmjs.com/package/gulp-htmlmin

Entonces, en total, no hay una herramienta que maneje todo de una sola vez. Pero combinar diferentes herramientas/paquetes lo hará por usted.

Minificación: ¿Cambiar el nombre/acortar los selectores de CSS?
RespuestasAquíPolítica de privacidad1y, 0v