Usando PostCSS para Minificación y Optimización

En el último tutorial, aprendió a usar PostCSS para ayudar a que sus hojas de estilo sean más compatibles con todos los navegadores, en particular, sobre los problemas que surgen del soporte para versiones heredadas de IE.

En este tutorial, aprenderemos cómo hacer que sus hojas de estilo sean más eficientes y se carguen más rápido, utilizando PostCSS para realizar varias operaciones de optimización y optimización..

Aprenderás cómo:

• Combina múltiples hojas de estilo en una sola @importar la regla, incluso si algunas de sus hojas de estilo provienen de componentes Bower o módulos npm, asegurándose de que solo necesita una http Solicite cargar el CSS de su sitio..
• Combine las consultas de medios coincidentes en una, permitiéndole usar la misma consulta de medios en múltiples ubicaciones durante el desarrollo, pero aún así obtendrá la eficiencia de las consultas consolidadas en su hoja de estilo final..
• Utilice el paquete cssnano para realizar todo tipo de optimizaciones, desde eliminar el espacio en blanco y los comentarios hasta minimizar ciertos tipos de código y mucho más..

Empecemos!

Configura tu proyecto

Lo primero que deberá hacer es configurar su proyecto para que utilice Gulp o Grunt, según sus preferencias. Si aún no tiene una preferencia por uno u otro, recomiendo usar Gulp, ya que necesitará menos código para lograr los mismos fines, por lo que le resultará un poco más sencillo trabajar con.

Puede leer acerca de cómo configurar proyectos Gulp o Grunt para PostCSS en los tutoriales anteriores

• Guía de inicio rápido de PostCSS: configuración de Gulp o
• Guía de inicio rápido de PostCSS: Grunt Setup

respectivamente.

Sin embargo, si no desea configurar manualmente su proyecto desde cero, puede descargar los archivos de origen adjuntos a este tutorial y extraer el proyecto de inicio provisto de Gulp o Grunt en una carpeta de proyecto vacía. Luego, con un terminal o indicador de comando apuntando a la carpeta, ejecute el comando npm instalar.

Instalar complementos

Para este tutorial usaremos dos complementos individuales, más un paquete de complementos. Instálalos ejecutando el siguiente comando dentro de la carpeta de tu proyecto:

npm instala postcss-import css-mqpacker cssnano --save-dev

Ahora que los complementos están instalados, avancemos y cargémoslos en su proyecto.

Cargar complementos a través de Gulp

Si está utilizando Gulp, agregue estas variables debajo de las variables que ya están en el archivo:

var atImport = require ('postcss-import'); var mqpacker = require ('css-mqpacker'); var cssnano = require ('cssnano');

Ahora agregue cada uno de esos nuevos nombres de variables en su procesadores formación:

 procesadores var = [atImport, mqpacker, cssnano];

Haz una prueba rápida de que todo está funcionando ejecutando el comando trago css luego verifique que haya aparecido un nuevo archivo "style.css" en la carpeta "dest" de su proyecto.

Cargar complementos a través de Grunt

Si estás usando Grunt, actualiza el procesadores objeto, que está anidado bajo la opciones objeto, a lo siguiente:

 procesadores: [require ('postcss-import') (), require ('css-mqpacker') (), require ('cssnano') ()]

Haz una prueba rápida de que todo está funcionando ejecutando el comando Grueso Postcss luego verifique que haya aparecido un nuevo archivo "style.css" en la carpeta "dest" de su proyecto.

Eso tiene todos los complementos instalados y cargados, así que avancemos a aprender cómo usarlos para la minificación y la optimización.

Inline / Combine Files con @import

En lugar de cargar múltiples hojas de estilo individualmente, es más eficiente, siempre que sea posible, combinar sus hojas de estilo en una sola..

Por ejemplo, el uso de Normalize.css es muy común, pero, si lo carga como una hoja de estilos independiente antes de su hoja de estilos principal, requiere múltiples http solicitudes, por lo tanto, ralentizando el tiempo de carga.

Sin embargo, si usa el complemento postcss-import de Maxime Thirouin, puede combinar Normalize.css en su hoja de estilo principal, mediante el uso de @importar regla, dándote el mismo CSS con solo una http solicitud.

@import luego Inline Normalize.css

Continuemos y hagamos esto ahora, importando y luego incorporando Normalize.css en la hoja de estilos de nuestro proyecto. Comience por descargar "normalize.css" en la carpeta "src" de su proyecto, desde https://necolas.github.io/normalize.css/

En la parte superior de su archivo "src / style.css" agregue la siguiente línea:

@import 'normalize.css';

Como ya tiene instalado postcss-import, eso es todo lo que tiene que hacer. Verá el @importar gobierne e inserte automáticamente el código del archivo normalize.css en su hoja de estilo.

Compile su archivo, y cuando vea su archivo "dest / style.css" debería ver todo el contenido de "normalize.css" en el mismo:

/ *! normalize.css v3.0.2 | Licencia MIT | git.io/normalize * / html font-family: sans-serif;… 

Puede usar este mismo proceso para combinar tantas hojas de estilo separadas como sea necesario. Solo lugar @importar líneas en su archivo "src / style.css" donde quiera que se inserte el código en línea.

Descubrimiento automático de componentes Bower y módulo de nodo

Una característica muy útil de este complemento es su capacidad para descubrir automáticamente los archivos CSS ubicados dentro de su carpeta "bower_components" o "node_modules".

Por ejemplo, en lugar de descargar manualmente "normalize.css" como hicimos anteriormente, en su lugar, simplemente puede ejecutar el comando instalación de bower normalize.css --save en tu proyecto Esto descargaría automáticamente el último archivo "normalize.css" en la carpeta "bower_components / normalize.css".

Nota: Si no tiene la configuración Bower en su computadora, aprenda cómo aquí.

En la parte superior de su hoja de estilo, ahora podría usar esta línea:

@import 'normalize.css / normalize.css';

El plugin postcss-import buscará dentro de su carpeta "bower_components" y encontrará "normalize.css", luego procederá a insertarlo como en el ejemplo anterior..

Se puede seguir el mismo proceso para cualquier hoja de estilo que se encuentre en su carpeta "node_modules", lo que significa que puede usar Bower o npm para manejar descargas, administración de dependencias y actualizaciones. Al usar cualquiera de los dos servicios, este complemento le brinda un medio fácil de combinar archivos CSS de terceros en sus propias hojas de estilo..

Formas de aprovechar @import Inlining

La incorporación de archivos CSS importados de esta manera no solo es una forma muy eficiente de combinar archivos de diferentes fuentes, como los componentes Bower, sino que también le brinda la opción de organizar su proyecto en múltiples hojas de estilo separadas..

Por ejemplo, puede crear un archivo para controlar su diseño y otro para controlar su esquema de color. Si desea cambiar su combinación de colores, puede seguir un proceso como este:

1. Hoja de estilo original duplicada
2. Modifícalo con nuevos códigos de color.
3. Importe la nueva hoja de estilo de color a su proyecto
4. Compilar para crear hojas de estilo de color alternativo

Luego puede repetir este proceso tantas veces como desee, haciendo que sea eficiente crear múltiples combinaciones de colores para el mismo diseño..

Algunos proyectos usan hojas de estilo separadas para proporcionar múltiples esquemas de color como este, pero en el proceso se crea una ralentización a partir de la adición http peticiones. Con este enfoque siempre terminas con uno solo. http solicite, a pesar de tener mucha libertad en lo que podría incluirse en su hoja de estilo individual.

Lea más acerca de postcss-import en: https://github.com/postcss/postcss-import

Combinar consultas de medios coincidentes

El complemento css-mqpacker de Kyo Nagashima encontrará consultas de medios coincidentes en su hoja de estilo y las combinará en una sola. Esto le permite organizar su CSS como le plazca en sus hojas de estilo de desarrollo, repitiendo consultas de medios si es necesario, sin preocuparse por cualquier pérdida de eficiencia en su hoja de estilos de producción..

Pongamos un ejemplo del tipo de caso de uso en el que quizás desee repetir consultas de medios, como por ejemplo, si organiza el diseño y los elementos visuales de su diseño por separado. En un proyecto real, esto podría significar el uso de archivos completamente separados, uno para el diseño y otro para los elementos visuales, pero por simplicidad haremos todo esto en nuestro archivo "src / style.css".

Comenzaremos con algún código de diseño. Añadiremos un .columna clase que hará dos 50% Las columnas de ancho se encuentran una al lado de la otra, de forma predeterminada. Luego usaremos una consulta de medios para hacer que se apilen unos sobre otros en tamaños más pequeños. Agregue este código a su hoja de estilo:

/ * DISEÑO * / .column ancho: 50%; flotador izquierdo;  @media (max-width: 50rem) .column width: 100%; flotar: ninguno; 

A continuación, agregaremos algunos elementos visuales para establecer un borde gris alrededor de nuestras columnas. La primera columna tendrá la clase. .column_one y el segundo tendrá la clase. .column_two. Vamos a utilizar la misma consulta de medios que hicimos con nuestro diseño para cambiar la forma en que aplicamos un borde a nuestras columnas, dependiendo de si están sentadas una al lado de la otra o una encima de la otra..

Agrega este código a tu hoja de estilo también:

/ * VISUALS * / .column_one, .column_two border: 0.0625rem solid #ccc;  .column_two border-left: 0;  @media (max-width: 50rem) .column_one, .column_two border: 0.0625rem solid #ccc;  .column_two border-top: 0; 

Ahora, vuelva a compilar el archivo "src / style.css" y observe el contenido resultante de "dest / style.css".

Como puede ver en el código a continuación, el complemento css-mqpacker ha identificado las dos consultas de medios coincidentes, y las ha combinado en una:

/ * DISEÑO * / .column ancho: 50%; flotador izquierdo;  / * VISUALS * / .column_one, .column_two border: 0.0625rem solid #ccc;  .column_two border-left: 0;  @media (max-width: 50rem) .column width: 100%; flotar: ninguno;  .column_one, .column_two border: 0.0625rem solid #ccc;  .column_two border-top: 0; 

Nota: El código anterior se reducirá en su archivo "dest / style.css" debido al complemento cssnano. Para ver el código no minificado, comentar temporalmente cssnano de su Gulpfile o Gruntfile's procesadores formación.

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

paquete de plugin cssnano

Para una optimización de CSS completa y multifacética, el paquete cssnano de Ben Briggs es una opción muy poderosa, pero que es prácticamente plug and play. Reúne alrededor de veinticinco complementos y puede realizar una impresionante cantidad de diferentes tipos de optimización..

Entre una larga lista de optimizaciones, puede:

• Franjas en blanco y punto y coma final
• Eliminar comentarios
• Optimizar los pesos de fuente
• Descartar reglas duplicadas
• Optimizar calc () utilizar
• Minimizar selectores
• Minimizar propiedades de mano larga
• Reglas de fusión

Vamos a procesar un código de ejemplo en su proyecto que verá aplicadas todas las optimizaciones anteriores..

Agregue este código a su archivo "src / style.css":

.css_nano, .css_nano + p, [class * = "css_nano"], .css_nano / * Este es un ejemplo de cssnano en acción * / font-weight: normal; margen superior: 1rem; margen inferior: 2rem; margen izquierdo: 1.5rem; margen derecho: 2.5rem; fuente-peso: normal; relleno: 1.75rem; ancho: calc (50rem - (2 * 1.75rem));  a texto-decoración: ninguno; font-weight: negrita;  p font-weight: negrita; 

Luego recompile su archivo.

Nota: es posible que desee comentar cualquier código que ya tenga, para que pueda ver claramente los resultados.

En su archivo "dest / style.css" ahora debería ver el código optimizado:

.css_nano, .css_nano + p, [class * = css_nano] margin: 1rem 2.5rem 2rem 1.5rem; font-weight: 400; padding: 1.75rem; width: 46.5rem a text-decoration: none a, p font-weight: 700

Eche un vistazo a la lista de optimizaciones mencionada en la lista de viñetas anterior, luego compare el código de ejemplo antes y después de la compilación para ver cómo tiene lugar cada uno de estos cambios:

• Los espacios en blanco, los comentarios y los puntos y coma finales se han ido.
• peso de la fuente: normal y peso de la fuente: negrita se convierten a peso de la fuente: 400 y peso de la fuente: 700
• La segunda, repetida instancia de la regla. fuente-peso: normal; ha sido eliminado de la .css_nano estilo
• los calc () La propiedad ha sido reducida a un valor estático.
• Los selectores .css_nano, .css_nano + p, [class * = "css_nano"], .css_nano se han reducido a .css_nano, .css_nano + p, [class * = css_nano]
• Las propiedades a mano. margen superior: 1rem; margen inferior: 2rem; margen izquierdo: 1.5rem; margen derecho: 2.5rem; se han reducido a margen: 1rem 2.5rem 2rem 1.5rem;
• los una y pag estilos se han fusionado para compartir sus comunes peso de la fuente: 700; ajuste

Para obtener una lista completa de las optimizaciones, cssnano proporciona información sobre: ​​http://cssnano.co/optimisations/

Configurando opciones y deshabilitando módulos

Hay varios complementos independientes empleados por el paquete cssnano, y es posible que desee configurar algunas opciones, o deshabilitarlas completamente, algunas de ellas..

Para deshabilitar un complemento, pase su nombre en sus opciones para cssnano con la configuración "falso" aplicada. Por ejemplo, si no desea optimizar los pesos de fuente, configure lo siguiente en su Gulpfile / Gruntfile:

// En la matriz de 'procesadores' Gulpfile cssnano (minifyFontWeight: false) // En la matriz de 'procesadores' Gruntfile requiere ('cssnano') (minifyFontWeight: false)

Puede seguir el mismo enfoque para configurar las opciones de un complemento, dando el nombre del complemento primero y luego configurando sus opciones.

Por ejemplo, puede establecer la precisión (número de posiciones decimales) que debe usar el complemento de cálculo. Por defecto calc (100% / 2.76) te daría 36.23188%. Pero si desea recortar esa precisión hasta dos decimales, puede hacerlo así:

// En la matriz de 'procesadores' Gulpfile cssnano (calc: precision: 2) // En la matriz de 'procesadores' Gruntfile requiere ('cssnano') (calc: precision: 2)

El valor de calc ahora saldría a 36.23%.

Para obtener más información sobre las opciones de cssnano, visite: http://cssnano.co/options

Resumen rápido

Vamos a tener un resumen de lo que hemos cubierto anteriormente:

• El plugin postcss-import le ofrece una forma eficiente de insertar hojas de estilo en línea..
• Se puede usar para combinar hojas de estilo de terceros, incluso a través del descubrimiento automático en su carpeta "bower_components" o "npm_modules".
• Se puede utilizar para permitirle dividir sus hojas de estilo en partes y luego combinarlas más tarde..
• El complemento css-mqpacker le permite duplicar consultas de medios para que pueda organizar su CSS como le plazca, incluso en archivos separados, y luego combinar todas las consultas de medios coincidentes en su hoja de estilo final..
• El paquete cssnano reúne alrededor de 25 complementos diferentes, dando a los plug and play acceso a una larga lista de funciones de optimización y optimización..
• Puede configurarse para usar los complementos incluidos que desee, con las opciones que desee.

Siguiente: Preprocesamiento con PreCSS

En el siguiente tutorial nos sumergiremos en el uso de PostCSS para el preprocesamiento a través de un excelente paquete de complementos llamado PreCSS. Este paquete brinda acceso inmediato a la sintaxis y funcionalidad de Sass, con variables, combinaciones, condicionales, ampliaciones y más.

Nos vemos en el siguiente tutorial.!