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

Guía rápida de PostCSS: Configurando Grunt

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called PostCSS Deep Dive.
PostCSS Quickstart Guide: Gulp Setup
PostCSS Quickstart Guide: Exploring Plugins

Spanish (Español) translation by Daniel Guillermo Romero Gelvez (you can also view the original English article)

En el tutorial anterior vimos cómo configurar un proyecto PostCSS con Gulp. En este tutorial lograremos el mismo objetivo, pero usando Grunt. Al final de este tutorial usted sabrá cómo configurar un proyecto PostCSS + Grunt con cualquier selección de plugins que usted elija.

Nota: si usted nunca ha trabajado con línea de comandos o corredores de tareas, le recomiendo que antes de iniciar este tutorial eche un vistazo a nuestra serie gratuita: La línea de comandos para el diseño web.

Requisitos previos

Como trabajaremos con Grunt, asumiremos que usted ya tiene instalados los requisitos previos para su uso.

  • Node.js
  • NPM
  • Git

Si usted no está seguro de tener eso instalado, por favor siga el turorial La línea de comandos para diseño web: Dominando paquetes de terceros.

Por favor, asegúrese de tener Grunt CLI instalado de manera global y de comprender su uso básico siguiendo La línea de comandos para diseño web: Automatizando con Grunt. Adicionalmente, siga las instrucciones en la sección del tutorial "Configurar el proyecto para Grunt". Antes de continuar usted debería tener una carpeta para el proyecto con:

  • Un archivo "gruntfile.js" (Gruntfile)
  • Un archivo "package.json" y
  • Grunt instalado en la carpeta "node_modules" y establecido como una dependencia de desarrollo para su proyecto.

PostCSS via Grunt

En su carpeta del proyecto agregue dos subcarpetas, una llamada "src" y la otra con el nombre "dest". La carpeta "src" tendrá los archivos CSS sin procesar, y PostCSS escribirá sus archivos CSS compilados en la carpeta "dest".

Lo siguiente que usted necesita es instalar el plugin de Grunt para PostCSS en su proyecto: usaremos grunt-postcss para gestionar la compilación.

En una terminal/consola de comandos, navegue hasta su carpeta del proyecto y ejecute el comando:

En este punto la estructura de su proyecto debería verse como esto:

Abra su archivo Gruntfile para editarlo, y añada la estructura básica de código que todos los Gruntfiles requieren:

Dentro de él, vamos a usar la función grunt.loadNpmTasks() para cargar nuestro grunt-postcss así:

Ahora estamos listos para empezar a configurar la tarea de Grunt que usaremos para ejecutar postcss. Primero, agregue la función grunt.initConfig() por encima de la línea que acabamos de añadir:

Dentro de él, configuramos un objeto llamado postcss así:

Dentro del nuevo objeto postcss agregaremos dos objetos anidados, uno llamado options y otro dist.

El objeto options tendrá la configuración para PostCSS, y el objeto dist tendrá la información sobre la ubicación de nuestros archivos CSS, desde dónde serán leídos y en donde serán escritos.

Continuemos, ahora cree un archivo CSS con el nombre "style.css" en la carpeta "src" del proyecto. Añada un código de prueba, como este:

Ahora actualice el objeto dist para especificar "src/style.css" como nuestro archivo fuente, y "dest/style.css" como el archivo que queremos generar:

Luego, dentro del objeto options, agregue un array vacío llamado processors. Este es donde configuramos los plugins PostCSS para usarlos un poco más adelante. Por ahora, sólo actualízelo a:

Ejecute una compilación de prueba

Su tarea básica postcss ahora está lista para funcionar. Para probarlo, con su terminal/consola de comandos todavía ubicada en su carpeta del proyecto, ejecute el comando:

En su terminal usted debería ver este mensaje:

Y ahora en su carpeta "dest" debería encontrar un nuevo archivo "style.css", que contiene el mismo código que el del archivo "style.css" en la carpeta "src".

Añadir Plugins PostCSS

A continuación vamos a añadir una selección de plugins PostCSS y paquetes: Autoprefixer (agrega el prefijos de proveedor), cssnext (habilita sintaxis futura) y precss (extiende la funcionalidad como Sass).

Ejecute los siguientes comandos para instalar cada uno en su proyecto:

Nota: Las instalaciones de cssnext y precss pueden tomar un poco de tiempo ya que son paquetes de múltiples plugins.

Ahora estamos listos para cargar cada uno de los plugins a través del array processors que creamos anteriormente. Actualice ese array con lo siguiente:

Sigamos avanzando, ahora añadimos un código de prueba a nuestro archivo fuente "style.css" y comprobamos que nuestra nueva configuración de los plugins PostCSS están trabajando como se esperaba.

Borre lo que ya tiene en el archivo y agregue este CSS en su lugar:

Ahora, ejecute el comando grunt postcss, y el archivo resultante en la carpeta "dest" debería tener el siguiente contenido:

Usted verá que en la clase .autoprefixer, han sido añadidos prefijos del proveedor por Autoprefixer. En la clase .cssnext, un color rgba() ha sido generado por cssnext. Y finalmente, en la clase .precss, el condicional @if @else ha sido evaluado por PreCSS.

Configurando las opciones del Plugin

Nota, si desea configurar las opciones para un plugin, pase sus opciones en el segundo par de paréntesis dentro de llaves después de la función require() de ese plugin. Por ejemplo, podría especificar la lista de exploradores que quiere trabajar con Autoprefixer, así:

Compartir su proyecto

La belleza de PostCSS está en su capacidad para ser configurado con cualquier combinación de plugins. El desafío que esto trae, sin embargo, es asegurarse de que otras personas que deseen trabajar en un proyecto tengan la misma configuración de plugins de PostCSS. Gracias a npm, este desafío se maneja a través de su sistema de gestión de dependencias.

Como usted está usando la bandera --save-dev  cada vez que instala un plugin en el proyecto, eso lo añadirá a su archivo "package.json" como una dependencia de desarrollo. Esto significa que si usted quiere compartir su proyecto con otros, ellos pueden ejecutar el comando npm install en el paquete que usted comparte y así todos tienen los mismos plugins instalados automáticamente.

Para aprender más acerca de cómo trabaja el gestor de dependencias NPM eche un vistazo el tutorial La línea de comandos para diseño web: Dominando paquetes de terceros.

Recapitulemos

Resumen de todo cubierto anteriormente:

  • Cree un proyecto npm con Grunt instalado y un Gruntfile dentro
  • Instale el plugin grunt-postcss
  • Configure la shell de Gruntfile, cargando grunt-postcss con grunt.loadNpmTasks('grunt-postcss');
  • Cree una tarea de grunt para compilar el CSS
  • Dentro de la tarea, configure un objeto options que contenga un array processors
  • También dentro de la tarea, configure un objeto dist especificando los archivos de origen y el destino de los archivos compilados

Desde ahí, usted puede seguir los mismos pasos esenciales para habilitar cualquier plugin de PostCSS en su proyecto:

  • Instale el plugin en su proyecto con
    npm install <nombre_del_plugin>  --save-dev
  • Añada ese nombre de variable en su array processors mediante la función require()
    require('<nombre_del_plugin>')().

Si lo desea, en el repositorio de Github puede ver archivos de arranque y ejemplos terminados.

El próximo tutorial: Explorando plugins

Ahora ya sabe cómo emplear Gulp o Grunt para usar PostCSS con cualquier plugin que usted elija. Lo siguiente que necesita es una manera de explorar el ecosistema de plugins PostCSS y encontrar grandes plugins que son perfectos para el tipo de proyectos que desea crear.

Vamos a ver exactamente cómo usted puede hacerlo en el siguiente tutorial; "Guía de inicio rápido: Explorando plugins".

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

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.