Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. PostCSS
Webdesign

Usar PostCSS para Minificar y Optimizar

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called PostCSS Deep Dive.
Using PostCSS for Cross Browser Compatibility
PostCSS Deep Dive: Preprocessing with “PreCSS”

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

En el último tutorial aprendiste como emplear PostCSS para ayudarte ha crear tus hojas de estilo hacerlas más compatibles entre diferentes navegadores, en particular con los problemas de soporte derivados de las antiguas versiones de IE.

En este tutorial aprenderemos a hacer tus hojas de estilo más eficientes y rápidas para su carga, usando PostCSS para ejecutar varias operaciones de minificado y optimización.

Aprenderás a:

  • Combinar múltiples hojas de estilo en una a través de la regla @import, incluso aunque algunas de ellas provengan de componentes Bower o módulos npm, de manera que solo necesites una petición http para cargar el CSS de tu web.
  • Combinar las media queries equivalentes en una, lo que te permitirá usarlas en múltiples ubicaciones durante el desarrollo y al mismo tiempo conseguir una hoja de estilo final con queries más eficaces y consistentes.
  • Emplea el pack cssnano para ejecutar todo tipo de optimizaciones, desde la supresión de espacios en blanco hasta el minificado de ciertos tipos de código y mucho más.

¡Comenzamos!

Configura Tu Proyecto

Lo primero que debes hacer es ajustar tu proyecto para usar Gulp o Grunt, el que prefieras. Si todavía no te has decantado por uno, yo te recomiendo Gulp ya que necesitarás menos código para obtener los mismos resultados, te resultará más fácil trabajar con él.

Puedes informarte sobre como trabajar con Gulp o Grunt para PostCSS en los tutoriales anteriores:

respectivamente.

Si no quieres ajustar manualmente tu proyecto desde cero, descargarte los archivos originales de este tutorial, y extrae el proyecto de inicio de Gulp o bien el de Grunt a una carpeta vacía destinada al proyecto. Después a través del terminal o con una indicación de comando que apunte a la carpeta ejecuta npm install.

Instalar los Plugins

Para este tutorial vamos a usar dos plugins independientes, y otro paquete de plugins. Instálalos ejecutando el siguiente comando dentro de la carpeta del proyecto: 

Ahora que los plugins ya están instalados, vamos a cargarlos en tu proyecto.

Cargar los Plugins vía Gulp

Si estás usando Gulp, añade estas variables bajo las que ya existen en el archivo:

Ahora agrega cada uno de los nombres de dichas nuevas variables en el array de tu processors:

Realiza un test rápido para comprobar que todo funciona correctamente mediante el comando gulp css, después comprueba la existencia de un nuevo archivo "style.css" en la carpeta "dest" de tu proyecto.

Cargar los Plugins vía Grunt

Si estás usando Grunt, actualiza el objeto processors, el cual está anidado bajo el objeto options, a lo siguiente:

Realiza un rápido test para comprobar que todo funciona lanzando el comando grunt postcss después verifica la existencia de un nuevo archivo "style.css" en la carpeta "dest" de tu proyecto.

Con esto ya tendríamos todos los plugins instalados y cargados, así que vamos ahora a aprender a usarlos para minificar y optimizar.

Inline/Combina Archivos con @import

Mejor que cargar varias hojas de estilo de forma individual, es más eficiente, siempre que sea posible, combinarlas en una.

Por ejemplo, es muy común el uso de Normalize.css, pero, si lo cargas individualmente antes que tu hoja de estilo principal, requerirá muchas peticiones http, y por consiguiente ralentizará el tiempo de carga.

Sin embargo, si usas el plugin postcss-import de Maxime Thirouin, puedes combinar Normalize.css con tu hoja de estilo principal, mediante la regla @import, obteniendo el mismo CSS con tan solo una petición http.

@import después incrusta Normalize.css

Avancemos y hagámoslo ya mismo, importa y después coloca en línea Normalize.css en la hoja de estilos de nuestro proyecto. Empieza descargando "normalize.css" dentro de la carpeta "src" de tu proyecto, desde https://necolas.github.io/normalize.css/

En la parte superior de tu archivo "src/style.css" añade lo siguiente:

Una vez tengas postcss-import instalado, esto es todo lo que tendrás que hacer. Detectará la regla @import y automáticamente incrustará el código perteneciente al archivo normalize.css en tu hoja de estilo.

Compila tu archivo, y cuando observes tu archivo "dest/style.css" deberías ver el contenido íntegro de "normalize.css" dentro:

Puedes emplear este mismo proceso para combinar tantas hojas de estilo individuales como necesites. Sencillamente coloca reglas @import en tu archivo "src/style.css" siempre que desees insertar el código en línea.

Automatic Bower Component y Node Module Discovery

Una característica muy útil de este plugin es su habilidad para detectar automáticamente archivos CSS ubicados dentro de tu carpeta "bower_components" o "node_modules"

Por ejemplo, en lugar de descargar manualmente "normalize.css" como hicimos antes, podrías simplemente ejecutar el comando bowerinstall normalize.css --save en tu proyecto. Así conseguirás descargar automáticamente la última versión del archivo "normalize.css" al interior de la carpeta "bower_components/normalize.css".

Nota: Si no tienes configurado Bower en tu ordenador, aprende a hacerlo aquí.

En la parte superior de tu hoja de estilo, podrías usar en cambio esta línea:

El plugin postcss-import buscará en el interior de tu carpeta "bower_components" y localizará "normalize.css", después importa cualquier hoja de estilo tal y como lo hicimos en el ejemplo anterior.

El mismo proceso se puede seguir para cualquier hoja de estilo situada en tu carpeta "node_modules", lo que significa que podrías usar indistintamente Bower o npm para manejar tus descargas, la gestión de dependencias y actualizaciones. Cuando hagas uso de cualquier servicio externo, este plugin te proporciona una forma simple para combinar el CSS de estas terceras partes en tu propia hoja de estilo.

Formas de Aprovechar el Método de Incrustación @import

Incrustar CSS importado de esta forma no solo es el método más eficiente de combinar archivos de diferentes fuentes, por ejemplo componentes Bower, sino que también te da opciones para organizar tu proyecto en multiples e individuales hojas de estilo.

Por ejemplo, imagina el caso de que quieras crear un archivo para controlar la retícula de tu diseño, y otro para gestionar el esquema de colores. Si decidieses cambiar la paleta de colores, podrías seguir el siguiente procedimiento:

  1. Duplicar la hoja de estilo que define el esquema de colores.
  2. Modificar el código de los colores que deseas cambiar
  3. Importar la nueva hoja de estilo de color en tu proyecto.
  4. Compilar para crear una hoja de estilo alternativa.

A posteriori podrías repetir este mismo proceso tantas veces como quisieras, consiguiendo crear de forma eficiente diferentes esquemas de color para un mismo diseño.

Algunos proyectos emplean hojas de estilo separadas para proporcionar múltiples esquemas de color como éste, pero el proceso ralentiza debido ha la suma de varias peticiones http. Con este enfoque siempre terminarás con una única petición http, manteniendo una gran libertad respecto a lo que pueda ser incluido en la hoja de estilo única.

Puedes leer más sobre postcss-import en: https://github.com/postcss/postcss-import

Combinar Media Queries Coincidentes

El plugin css-mqpacker de Kyo Nagashima encuentra las media queries coincidentes en tu hoja de estilo y las combina en una. Esto te permite organizar tu CSS como tú desees durante el desarollo de tus hojas de estilo, repitiendo media queries si lo necesitas, sin preocuparte de la pérdida de eficacia de hoja de estilo resultante. 

Veamos un ejemplo en el que podrías desear repetir media queries, por ejemplo si estuvieses organizando el diseño de la estructura y los detalles visuales por separado. En un proyecto real esto implicaría el uso de archivos independientes, uno para la estructura de las páginas y otro para los aspectos visuales, pero en pro de la simplicidad haremos todo ésto en nuestro archivo "src/style.css".

Comenzaremos con algo de código para la estructura. Añadiremos una clase .column que creará dos columnas de una anchura del 50% y por defecto contiguas. Después usaremos un media query para disponerlas una sobre otra para dispositivos de menor anchura. Agrega este código a tu hoja de estilo:

Seguidamente añadimos algunos elementos visuales, como un borde gris alrededor de nuestras columnas. A la primera columna se le asigna la clase .column_one y a la segunda .column_two. Vamos a usar la misma media query que empleamos antes en la estructura para cambiar la forma en que es aplicado el borde a las columnas dependiendo de si éstas se disponen contiguas o una sobre otra.

Añade este código a tu hoja de estilo también:

Ahora, recompila tu archivo "src/style.css" y echa un vistazo al contenido del "dest/style.css" resultante.

Tal como puedes ver en el código siguiente, el plugin css-mqpacker ha identificado las dos media queries coincidentes y las ha combinado en una:

Nota: El código de arriba será minificado en tu archivo “dest/style.css” gracias al plugin cssnano. Para ver el código sin minificar, desactiva temporalmente cssnano desde el array processors de Gulpfile o Gruntfile.

Lee más sobre css-mqpacker en https://github.com/hail2u/node-css-mqpacker

Pack del Plugin cssnano

Para una comprensiva y polifacética optimización CSS, el pack cssnano de Ben Briggs es una opción realmente potente, y además prácticamente "plug and play" Se compone de un conjunto de unos veinticinco plugins, y es capaz de realizar un increíble número de tipos de optimizaciones diferentes.

Entre una larga lista de optimizaciones, destacan:

  • Eliminar espacios en blanco y los puntos y comas
  • Eliminar los comentarios
  • Optimizar los grosores de letra
  • Descartar las reglas duplicadas
  • Optimización del uso de calc()
  • Minificado de selectores
  • Minificado de propiedades sin abreviar
  • Fusionado de reglas

Vamos a procesar algo de código a modo de ejemplo en tu proyecto para que veas la aplicación de todas optimizaciones que acabamos de mencionar.

Añade este código a tu archivo "src/style.css":

Después recompila tu archivo.

Nota: podrías desear destacar el código que tenías anteriormente, y así comprobar con claridad los resultados.

En tu archivo “dest/style.css” deberías ver ahora el código optimizado:

Echa un vistazo a través de la lista de optimizaciones mencionadas en la lista anterior, después compara el código de ejemplo anterior y posterior a la compilación para comprobar el efecto de estos cambios.

  • Los espacios en blanco, los comentarios y los puntos y comas han desaparecido.
  • font-weight: normal y font-weight: bold se han convertido en font-weight: 400 y font-weight: 700
  • En segundo lugar, la instancia repetida de la regla font-weight: normal; se ha eliminado del estilo .css_nano
  • La propiedad calc() ha sido reducida a un valor estático
  • Los selectores .css_nano, .css_nano + p, [class*="css_nano"], .css_nano han sido minificados como .css_nano,.css_nano+p,[class*=css_nano]
  • Las propiedades no abreviadas margin-top: 1rem; margin-bottom: 2rem; margin-left: 1.5rem; margin-right: 2.5rem; se han comprimido como margin:1rem 2.5rem 2rem 1.5rem;
  • Los estilos de a y p se han combinado para compartir el ajuste común font-weight: 700;

Para ver una lista completa de las minificaciones que cssnano proporciona visita: http://cssnano.co/optimisations/

Configurar Opciones y Deshabilitar Módulos

Existen algunos plugins independientes empleados por el paquete de cssnano, y cabe la posibilidad de que desees configurar algunos ajustes de estos, o desactivar por completo, algunos de ellos.

Para desactivar un plugin, indica su nombre en tus opciones de cssnano aplicándole el ajuste "false". Por ejemplo, si no quieres optimizar el grueso de las fuentes, establece lo siguiente en Gulpfile/Gruntfile:

Puedes seguir el mismo procedimiento para configurar las opciones de un plugin, indicando primero el nombre del plugin y después sus ajustes.

Por ejemplo, puedes establecer la precisión, (número de decimales), que el plugin calc debería usar. Por defecto con calc( 100% / 2.76 ) obtendrías 36.23188%. Pero si desearas reducir la precisión a solo dos decimales, podrías conseguirlo así:

El resultado del cálculo sería ahora 36.23%.

Si quieres más información sobre cssnano visita: http://cssnano.co/options

Resumen

Hagamos un repaso a todo lo visto arriba:

  • El plugin postcss-import proporciona un modo eficaz para incrustar hojas de estilo.
  • Se puede usar para combinar hojas de estilo de terceras partes, incluyendo auto-discovery para las carpetas “bower_components” o “npm_modules.
  • Lo puedes usar para separar tus hojas de estilo en partes, y recombinarlas posteriormente.
  • El plugin css-mqpacker te permite duplicar media queries de forma que puedas organizar tu CSS como quieras, incluyendo la separación en archivos, y después combinar todas las media queries en una hoja de estilos final.
  • El paquete cssnano reúne a alrededor de 25 diferentes plugins, dando acceso directo a una larga lista de funciones de minificado y optimización.
  • Puede ser configurado para usar cualquier plugin incluido que quieras, con las opciones que desees.

Lo Próximo: Preprocesamiento con PreCSS

En el siguiente tutorial bucearemos en el uso de PostCSS para el pre-procesamiento mediante un excelente paquete plugins llamado PreCSS. Este paquete te ofrece un acceso inmediato a una sintaxis y funcionalidad similar a la que usa Sass, con variables, mezclas, condicionales, extensiones y mucho más.

¡Nos vemos en el siguiente tutorial!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.