Elimina CSS Innecesario Con PurifyCSS y Grunt
Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)
En este tutorial te mostraré cómo usar Grunt y PurifyCSS para crear una hoja de estilos superligera con el mínimo esfuerzo. Lo instalaremos, y después aprenderemos a manejarlo con y sin Grunt, de forma que nos proporcione más estilos como resultado.
Sigue la Explicación

PurifyCSS es una herramienta JavaScript que procesa el código de tus archivos (HTML, PHP, e incluso JavaScript) después realiza referencias cruzadas con todo aquel CSS que estés usando. Cualquier selector de tu CSS que no esté siendo usado se eliminará, dejándote solo con los estilos que realmente necesitas.
Instalación
Para instalar PurifyCSS puedes o bien coger el repositorio directamente de GitHub, o instalarlo vía npm (más detalles sobre cómo se hace mediante este método en el tutorial de Kezz).



Nuestra Demo
Los archivos que usaremos para mostrar PurifyCSS son, una hoja de estilo Bootstrap completa y un index.html. Las puedes conseguir del repositorio original. El archivo index.html está bastante claro; solo dispone de una sección "hero", con algunos botones, elementos de formulario, y la retícula Bootstrap; realmente no necesitamos toda la librería de estilos Bootstrap.



Empezar con PurifyCSS
Para procesar esta hoja de estilo con PurifyCSS, dirígete a al inicio de la línea de comandos, navega a la carpeta del proyecto y ejecuta un comando con lo siguiente:
- el comando
purifycss
para poner las cosas en marcha - la hoja de estilo original que queremos depurar
- Los archivos de código de estructura, en nuestro caso index.html
- un parámetro opcional
--min
si deseamos que el CSS resultante esté minificado. - un parámetro opcional
--out
después del cual podemos especificar dónde deseamos guardar el archivo resultante. - el parámetro opcional
--info
si queremos que el proceso sea registrado por el terminal. - y el parámetro opcional
--rejected
que, en caso de ser incluido, registra todos los selectores que hayan sido descartados de la hoja de estilos original
Nuestro comando final será así:
purifycss css/bootstrap-full.css index.html --min --out css/bootstrap-purify.css --info --rejected
Resultado
La hoja de estilo original ha sido reducida alrededor de 100 Kb, ¡buen trabajo!



Uso de PurifyCSS Con Grunt
Para automatizar nuestro proceso aún más, podemos usar un procesador de tareas como Grunt. Volviendo a donde estábamos, necesitamos añadir a nuestro proyecto un package.json. Si arrancamos init npm desde el interior de nuestra carpeta, nos dirigirá a través del proceso de creación de package.json, esencialmente originando un archivo con los detalles siguientes:
{ "name": "purifycss", "version": "1.0.0", "description": "A file for testing Grunt PurifyCSS", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "Adi Purdila", "license": "ISC", }
Luego, si realmente no disponemos de él, necesitaremos instalar Grunt:
npm install grunt --save
Hecho esto, verás que se ha creado una nueva carpeta "node_modules" dentro de la de tu proyecto.
Instalar el Plugin de Grunt
Ahora tenemos que instalar el Plugin de Grunt para PurifyCSS.
npm install grunt-purifycss --save
Crear un Archivo Grunt
Debemos crear un archivo llamado gruntfile.js. Echa un vistazo a los archivos de origen para ver que contiene este archivo, aunque lo realmente interesantes es la tarea Grunt en sí misma.
purifycss: { target: { src: ['*.html', 'js/*.js'], css: ['css/bootstrap-full.css'], dest: 'css/bootstrap-grunt.css' } }
Las opciones dentro del objeto target te deberían resultar familiares de nuestro ejercicio anterior, y con estos parámetros, nuestro archivo está listo.
Para iniciar Grunt, introduce en el terminal:
grunt purifycss
Conclusión
¡Ya lo tenemos! Hemos visto dos enfoques diferentes en el uso de PurifyCSS para limpiar nuestras hojas de estilo. No olvides: no tiene sentido cargar estilos con kilobytes en los navegadores que ni siquiera se van a usar, ¡el rendimiento es vital!
Recursos de Utilidad
Más Sobre Grunt en Tuts+
- TerminalLa línea de Comandos para Diseño Web: Automatizar con GruntKezz Bracey
- JavaScriptJavaScript para la Automatización del Flujo de Trabajo Usando Grunt y GulpEtienne Margraff
- Diseño de EmailsEl Uso de Grunt Para Devolver La Diversión A Tu Flujo de Trabajo En El Diseño De Tus EmailsLee Munroe