Guía rápida de PostCSS: Configurando Gulp

() translation by (you can also view the original English article)

En el tutorial pasado cubrimos cómo usted puede comenzar con PostCSS al instante usando CodePen o Prepros. Estas opciones son geniales, pero restrictivas porque usted no tiene control sobre otros plugins que están disponibles para usar.

En este tutorial iremos a través de cómo se puede utilizar PostCSS con el corredor de tareas Gulp, lo que le permite decidir por usted mismo cuáles plugins quiere utilizar y por lo tanto realmente aprovechar el ecosistema de plugins.

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

Requisitos previos

Dado que estaremos trabajando con Gulp, asumiremos que usted ya tiene instalados los requisitos para su uso:

Node.js
NPM
Git

Si no está seguro de que tiene eso instalado, por favor siga el tutorial La línea de comandos para diseño web: Dominando paquetes de terceros que lo guiarán para obtener esos requisitos previos.

También asegúrese de entender los conceptos básicos para usar Gulp siguiendo el tutorial La línea de comandos para diseño web: automatización con Gulp. Además, siga las instrucciones en la sección del tutorial "Configurando el proyecto para Gulp". Antes de continuar usted debería tener una carpeta de proyecto con:

Un archivo "gulpfile.js" (Gulpfile)
Un archivo "package.json" y
Gulp instalado en la carpeta "node_modules" y establecido como una dependencia de desarrollo para su proyecto

Configuración básica de Gulp PostCSS

Dentro de la carpeta del proyecto cree dos subcarpetas, una llamada "src" y una llamada "dest". La carpeta "src" tendrá los archivos CSS sin procesar, mientras que la carpeta "dest" tendrá los archivos PostCSS procesados.

Lo siguiente que necesita hacer es instalar el plugin de gulp-postcss en su proyecto - utilizaremos esto para manejar nuestro proceso de PostCSS.

En la terminal/consola de comandos, navegue hasta la carpeta del proyecto y ejecute:

1	npm install --save-dev gulp-postcss

Después de que la instalación se complete, la estructura del proyecto debería tener este aspecto:

Ahora abra su Gulpfile para editarlo y cree variables para llamar los módulos "gulp" y "gulp-postcss" añadiendo el siguiente código:

1	var gulp = require('gulp');
2	var postcss = require('gulp-postcss');

Ahora podemos configurar una tarea para leer un archivo fuente CSS y procesarlo con PostCSS.

Agregue lo siguiente:

gulp.task('css', function () {
  var processors = [
  ];
  return gulp.src('./src/*.css')
    .pipe(postcss(processors))
    .pipe(gulp.dest('./dest'));
});

Vamos a explicar lo que tenemos en el código anterior.

En la primera línea hemos configurado una tarea de Gulp llamada css. Esta tarea ejecuta una función, y dentro de esa función hemos creado un array llamado processors. Justo ahora el array está vacío, pero en un momento lo llenaremos con los plugins de PostCSS que queremos utilizar.

Luego, en el array processors hemos especificado los archivos que queremos procesar: cualquier archivo CSS en la carpeta "src".

En la primera de las dos líneas usando la función pipe(), establecemos la ejecución de PostCSS mediante la función postcss(). Pasamos el array processors como un argumento de la función, que luego le dirá a PostCSS cuáles plugins queremos usar.

Finalmente, con la segunda de las dos funciones pipe(), estamos teniendo nuestro código transformado en un nuevo archivo CSS en la carpeta "dest".

Ejecutar una compilación de prueba

Sigamos, cree un nuevo archivo "style.css" en su carpeta "src" y añada un poco de CSS prueba como este:

1	.test {
2	background: black;
3	}

Ahora en su terminal/consola de comandos, todavía ubicada en la carpeta del proyecto, ejecute el comando:

gulp css

Esto ejecutará la tarea que acaba de configurar, y como resultado ahora debería encontrar un nuevo "style.css" dentro de la carpeta "dest".

Al abrir este nuevo archivo, verá que el código es idéntico al del archivo fuente. El código no ha cambiado porque no hemos usado ningún plugin PostCSS aún, y como usted sabe desde un tutorial previo, son los plugins los que realmente realizan las manipulaciones CSS.

Añadir Plugins PostCSS

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

Ejecute los siguientes comandos para instalar cada plugin en el proyecto:

1	npm install autoprefixer --save-dev
2	npm install cssnext --save-dev
3	npm install precss --save-dev

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

A continuación definimos las variables para cargar cada uno en nuestro proyecto. Agregue el código siguiente debajo de las dos variables existentes en la parte superior de su Gulpfile:

1	var autoprefixer = require('autoprefixer');
2	var cssnext = require('cssnext');
3	var precss = require('precss');

A continuación vamos a añadir estos tres plugins al array processors en nuestra tarea de gulp. Actualice el array con lo siguiente:

  var processors = [
    autoprefixer,
    cssnext,
    precss
  ];

Con los tres plugins agregados a nuestro array processors, PostCSS sabrá que queremos aplicar cada uno a nuestro CSS fuente.

Ahora estamos listos para añadir un código de prueba a nuestro archivo "src/style.css" y comprobar que todo está funcionando. Borre lo que ya tiene en el archivo y agregue este CSS en su lugar:

/* Testing autoprefixer */

.autoprefixer {
  display: flex;
}

/* Testing cssnext */

.cssnext {
  background: color(red alpha(-10%));
}

/* Testing precss */

.precss {
  @if 3 < 5 {
    background: green;
  }
  @else {
    background: blue;
  }
}

Ejecute el comando gulp css otra vez, y el archivo resultante en la carpeta "dest" debería tener el siguiente contenido:

/* Testing autoprefixer */

.autoprefixer {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

/* Testing cssnext */

.cssnext {
  background: rgba(255, 0, 0, 0.9);
}

/* Testing precss */

.precss {
  background: green
}

Según lo anterior, debería ver que se han añadido prefijos de proveedores a la primera clase por Autoprefixer, un color rgba() ha sido creado por cssnext en la segunda clase, y la comprobación de @if @else ha sido evaluada por PreCSS en la tercera clase.

Configurando las opciones del Plugin

Nota: Si desea configurar las opciones de un plugin, añada un par de paréntesis después de su nombre en el array processors y pase las opciones ahí. Por ejemplo, podría especificar la lista de exploradores que desea trabajar con Autoprefixer, así:

  var processors = [
    autoprefixer({browsers: ['last 1 version']}),
    cssnext,
    precss
  ];

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 tienen 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 su proyecto, éstos son añadidos a su archivo "package.json" como una dependencia de desarrollo. Esto significa que si usted comparte su proyecto con otros, ellos pueden ejecutar el comando npm install en el paquete que usted compartió con ellos y tendrán todos los plugins instalados automáticamente.

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

Recapitulemos

Para resumir lo anterior:

Cree un proyecto NPM con Gulp instalado y un Gulpfile dentro
Instale el plugin gulp-postcss
Configure su Gulpfile para cargar los plugins gulp y gulp-postcss
Cree una tarea gulp para compilar su CSS
Dentro de la tarea, configure un array processors.
Conduzca su fuente CSS a través de la función postcss(), con el array processors pasado como un argumento.

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
Defina una variable para cargar el plugin en su Gulpfile por ejemplo:
var autoprefixer = require('autoprefixer');
Añada ese nombre de variable al array processors.

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

Lo que viene a continuación: Grunt + PostCSS

En el siguiente tutorial cubriremos cómo configurar un proyecto de PostCSS en otro de los grandes corredores de tareas: Grunt. ¡Nos vemos allí!

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