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.

bootstrap styles — La hoja de estilos completa de 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!