Compilando SASS con Gulp

En el artículo anterior aprendimos a instalar gulp de forma global en nuestro ordenador, y de forma local, en nuestro proyecto. Dejamos preparado el directorio del proyecto, para empezar a trabajar, pero aún no hemos hecho nada con gulp. Hemos comentado que se trata de un gestor de tareas, es decir un mecanismo para automatizar de forma eficiente tareas repetitivas, o susceptibles de esa automatización. Sin embargo esto es, explicado así, en teoría, ambiguo y confuso.

En este artículo vamos a aprender a darle un uso práctico (muy habitual, por otra parte) a gulp. No es EL uso práctico. Es UN uso práctico. Lo que quiero decir con esto es que gulp nos va a poder servir para muchísimas más finalidades de las que podríamos ver en un sólo artículo, así que consideraremos éste como introductorio. Un punto de partida porque, con una herramienta como gulp, por algún sitio hay que empezar.

EL SISTEMA DE PLUGINS

¿Para qué nos sirve gulp? Si ahora te dijera que así, tal cómo lo tenemos de momento, no nos sirve para nada en absoluto, seguramente pienses que te estoy tomando el pelo, o que se me han aflojado algunos tornillos. Si no sirve para nada, ¿por qué tanto bombo?

Gulp se basa en un sistema de plugins. Existen plugins para todo lo que se puede hacer con gulp (y, créeme, son muchas cosas). Lo que hemos instalado en el artículo anterior es, por decirlo claramente, el núcleo de gulp, desnudo, sin utilidades implementadas. Lo que realmente sirve para «hacer cosas» son los plugins de gulp. Lo que ocurre es que para poder instalar y hacer funcionar esos plugins, debemos tener el núcleo. Es como un ordenador. De nada te sirve tener sólo la placa base si no tienes memoria, disco duro, monitor, etc. Pero no puedes instalar y hacer funcionar esos componentes si no tienes la placa base. Con gulp hemos hecho, exactamente, eso. En este artículo aprenderemos a instalar los plugins y a usarlos debidamente.

LOS PLUGINS PARA SASS

Vamos a empezar viendo como escribir nuestras hojas de estilos en SASS, y dejar que gulp se ocupe de compilarlas a CSS. Para ello vamos a usar dos plugins de gulp:

  • gulp-sass. Es el plugin que se ocupa de convertir el código SASS a CSS.
  • gulp-autoprefixer. Es el plugin que se ocupa de añadir los prefijos específicos de cada navegador a las etiquetas CSS que lo necesiten, una vez el código SASS ha sido correctamente compilado con el plugin anterior. Cómo sin duda ya sabes, algunas etiquetas de CSS no son aceptadas directamente por todos los navegadores. Así pues, es necesario añadir prefijos específicos para que funcionen en cualquier navegador. Con la competencia entre navegadores por ampliar cuota de mercado, en cada versión son menos las etiquetas CSS que requieren prefijos. Puedes ver una lista en http://shouldiprefix.com/. No obstante, ante la duda, usaremos el plugin y, si alguna etiqueta lo requiere, ya se encargará gulp de ponérselo. Ni siquiera tenemos que pensar en ello.

Estos plugins (y cualesquiera otros que necesitemos en el futuro) deben instalarse, de modo local al proyecto. Para ello, abriremos la consola de mandatos y nos situaremos en el directorio de nuestro proyecto. Una vez allí, teclearemos:

npm install --save-dev gulp-sass
npm install --save-dev gulp-autoprefixer

Con estas dos instrucciones hemos incorporado los dos plugins a nuestro proyecto, en el modo de desarrollo (tal como hicimos con el núcleo de gulp en el artículo anterior). Para confirmarlo, le echamos un vistazo a package.json, que ahora aparece así:

Si observas las dos líneas destacadas, puedes comprobar como ambos plugins se han instalado como dependencias de desarrollo.

CREANDO LA ESTRUCTURA DEL PROYECTO

Para empezar a probar cómo funciona esto, vamos a crear un archivo llamado index.html, donde colocaremos, simplemente, un código HTML de pruebas. También crearemos dos directorios: uno llamado scss, en el que escribiremos nuestro código SASS, y otro llamado css, donde gulp compilará nuestro SASS a CSS. Nosotros no escribiremos una sola línea de CSS. Será gulp quien lo haga por nosotros. Estos tres elementos los incluiremos en el directorio raíz de nuestro sitio.

EL FICHERO index.html

Este fichero no tiene nada de especial. Solo es una capa de cabecera, y una capa de contenidos que, a su vez, contiene otras tres capas. El listado completo es el siguiente:

Lo único digno de mención es la línea resaltada, donde se intenta cargar un archivo llamado css/styles.css, que aún no tenemos, por lo que no se puede cargar.

EL ARCHIVO scss/styles.scss

El archivo donde definimos los estilos en sass está en scss/styles.scss. Su listado es el siguiente:

No vamos a entrar ahora en detalles acerca de la sintaxis de SCSS (SASS), porque es bastante extensa, y le dedicaremos sus propios artículos. De momento, si no estás familiarizado con este preprocesador, baste saber que es una forma más simple y potente de escribir hojas de estilos, que nos da mayores prestaciones que hacerlo a mano y nos ahorra trabajo.

TERMINANDO EL ESCENARIO

Ya tenemos preparado el escenario, con nuestro archivo index.html y la hoja de estilos escrita en un preprocesador. Sin embargo, dado que los navegadores sólo entienden CSS puro, es necesario convertir el archivo de estilos en sintaxis SCSS a CSS. Es lo que se llama compilar a CSS (aunque, desde el punto de vista de la programación, no es una compilación como tal, se emplea esta terminología). Y aquí es donde entra en juego gulp, junto con los dos plugins que hemos instalado. Tenemos que crear, en la raíz de nuestro sitio, un archivo llamado gulpfile.js (tiene que llamarse así específicamente), que se basa en JS 6 (JavaScript 2015), y tiene el siguiente contenido:

Lo que hace este archivo es lo siguiente:

En primer lugar, carga el núcleo de gulp, y los dos plugins que vamos a usar para esta tarea. Los procesos de gulp de declaran en tareas con nombre. Podríamos tener instalados en nuestro proyecto más plugins, pero aquí solo cargamos los que vamos a necesitar ahora. Para ello usamos la función require(), que recibe, como argumento, el nombre del núcleo o del plugin que queremos cargar en cada caso. Esta función carga el elemento solicitado en una variable o en una constante. Como, una vez cargado ya no lo vamos a modificar, usamos constantes. El nombre que les demos a las constantes que creamos así es arbitrario, pero se aconseja darles nombres orientativos de lo que se carga en ellas. Eso lo hacemos con el siguiente fragmento de código:

const gulp = require('gulp'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer');

Lo siguiente es definir una tarea de gulp. Cómo hemos dicho, es un gestor de tareas. Las tareas debemos definirlas asignándoles un nombre. A la tarea encargada de compilas el SCSS a CSS, y añadir, donde sean necesarios, los autoprefijos, la vamos a llamar, en este ejemplo, sass-compile. El nombre también es arbitrario pero, al igual que antes, se aconseja darle un nombre significativo. Para declarar una tarea usamos el método task() del objeto que tiene el núcleo de gulp. Este método recibe dos argumentos (puede recibir más, pero de eso ya hablaremos): el primero es el nombre de la tarea. El segundo es una matriz, en la notación de JS6, que recibirá las instrucciones que tendrá que llevar a cabo la tarea. Por lo tanto, la estructura de la tarea se envuelve en la siguiente sintaxis:

gulp.task ('sass-compile', ()=>
...
);

Dentro de la tarea, lo primero que hacemos es especificar el origen, es decir, donde están los archivos scss que queremos compilar. Lo hacemos con el método src() del objeto que representa al núcleo de gulp, así:

gulp.src('./scss/*.scss').

En este caso, le hemos dicho que el origen son todos los archivos con extensión .scss que se encuentren dentro de la carpeta scss desde la ruta actual. Observa que la instrucción la terminamos con un punto. Eso significa que, justo a continuación, vamos a encadenar otro método del objeto gulp. El método que encadenamos es pipe() que permite pasarle lo que acabamos de leer (los archivos de origen) a un plugin. En este caso, va a ser el plugin contenido en el objeto sass, donde se ha cargado antes gulp-sass, así:

pipe(sass()).

Esta es, realmente, la instrucción que toma los archivos del origen, y los compila a CSS. Como ves, esta instrucción también la terminamos con un punto, diciéndole así que vamos a encadenar otro método. Una vez más, usamos el método pipe(). En esta ocasión le pasamos el objeto autoprefixer, que representa al plugin gulp-autoprefixer. Al ir encadenado, toma el resultado del método que acabamos de ver, y se lo pasa a este plugin:

pipe(autoprefixer()).

Este plugin toma el archivo precompilado a css, y le añade los autoprefijos a las reglas que sean necesarias. Una vez más, acabamos con un punto para encadenar otro método. El siguiente método es del objeto que representa al núcleo de gulp. El método dest() establece el destino donde se grabará el resultado de todo lo que han hecho los métodos anteriores, así:

pipe(gulp.dest('./css'))

Fíjate que especificamos la ruta de salida del resultado (./css) pero no un nombre de archivo. Por lo tanto, el resultado se grabará con el mismo nombre que el archivo original (styles), pero con la extensión .css, puesto que ya ha sido «convertido».

Y ya tenemos definida la tarea, pero aún no «hace nada».

EJECUTANDO NUESTRO ARCHIVO DE TAREAS

Abre la consola, sitúate en el directorio raíz del proyecto (c:/xampp/htdocs/prueba_gulp, en mi caso), y teclea el comando gulp, seguido del nombre de la tarea, así:

gulp sass-compile

Ahora sí. En la carpeta css ha aparecido, como por arte de magia, el archivo styles.css. Si cargas el fichero index.html en tu navegador, verás que los estilos funcionan perfectamente. Vale. El resultado no es muy bonito. Ya miraremos eso. Lo que importa es que la tarea de gulp ha funcionado.

CONCLUYENDO

En este artículo hemos sentado las bases de un uso muy simplista, pero ilustrativo, de gulp. En el próximo artículo continuaremos ahondando en este ejercicio, y aprendiendo más sobre esta potente herramienta. En este enlace te dejo los códigos de este artículo, pero sin gulp ni los plugins instalados, para que te familiarices con la instalación, tal como se describió en el artículo anterior, y en este mismo.

   

Deja un comentario