Share
En este tutorial, te mostraré cómo usar Grunt y PurifyCSS para crear una hoja de estilo súper liviana con el mínimo esfuerzo. Lo instalaremos, luego aprenderemos cómo ejecutarlo con y sin Grunt, para darnos muchos más estilos de rendimiento..
PurifyCSS es una herramienta de JavaScript que analiza sus archivos de marcado (HTML, PHP o incluso JavaScript) y luego los compara con cualquier CSS que esté utilizando. Se eliminarán todos los selectores en su CSS que no se estén utilizando, lo que le dejará solo los estilos que realmente necesita.
Para instalar PurifyCSS, puede obtener el repositorio directamente desde GitHub o instalarlo a través de npm (más detalles sobre cómo se hace a través de este tutorial de Kezz).
Instalación vía npmLos archivos que usaremos para demostrar PurifyCSS son una hoja de estilo Bootstrap completa y un index.html. Puede obtenerlos desde el repositorio de origen. El archivo index.html es bastante sencillo; solo hay una sección de héroe, con algunos botones, elementos de formulario y la cuadrícula Bootstrap; Ciertamente no necesitamos toda la biblioteca de estilos Bootstrap.
La hoja de estilo de Bootstrap completaPara ejecutar PurifyCSS en esta hoja de estilo, vaya a la línea de comandos, navegue a la carpeta del proyecto y ejecute un comando con lo siguiente:
Accentsconagua
purifycss orden de arrancar las cosas--min Si queremos que el CSS resultante sea minificado.--afuera después de lo cual podemos especificar dónde queremos que se guarde el archivo resultante--info Si queremos que el proceso sea registrado en la terminal.--rechazado que, cuando se incluye, registra todos los selectores que han sido rechazados de la hoja de estilo de origenNuestro comando final se ve así:
purifycss css / bootstrap-full.css index.html --min --out css / bootstrap-purify.css --info --rejected
La hoja de estilo de origen ha sido recortada en más de 100Kb, buen trabajo!
Para automatizar aún más nuestro proceso, podemos usar un corredor de tareas como Grunt. Volviendo a nuestro punto de partida, necesitamos agregar un package.json a nuestro proyecto. Ejecutar npm init desde nuestra carpeta nos llevará a través de un proceso de creación de package.json, esencialmente generando un archivo con los siguientes detalles:
"name": "purifycss", "version": "1.0.0", "description": "Un archivo para probar Grunt PurifyCSS", "main": "index.js", "scripts": "test" : "echo \" Error: no se especificó la prueba \ && exit 1 "," autor ":" Adi Purdila "," licencia ":" ISC ",
Entonces, si no lo tenemos, necesitamos instalar Grunt:
npm install grunt --save
Una vez hecho esto, verá que se ha agregado una carpeta de "node_modules" a su proyecto.
Luego necesitamos instalar el complemento Grunt para PurifyCSS.
npm install grunt-purifycss --save
Ahora necesitamos crear un archivo llamado gruntfile.js. Eche un vistazo a los archivos de origen para ver qué contiene este archivo, pero de particular interés es la tarea Grunt en sí:
purifycss: target: src: ['* .html', 'js / *. js'], css: ['css / bootstrap-full.css'], dest: 'css / bootstrap-grunt.css'
Las opciones dentro del objeto objetivo deben ser familiares para usted en nuestro ejercicio anterior, y con estos parámetros establecidos, nuestro archivo está listo.
Para ejecutar Grunt, en la terminal ingrese:
gruñido purifycss
¡Y hemos terminado! Analizamos dos enfoques diferentes para usar PurifyCSS para limpiar nuestras hojas de estilo. No se olvide: no tiene sentido que los navegadores carguen en kilobytes de estilos que ni siquiera se usan, el rendimiento importa!
