Mejorando la compilación de SASS con gulp

Iniciamos este artículo como continuación lógica del anterior. Espero que te haya gustado la forma de generar CSS a partir de SASS con gulp. En este artículo vamos a conocer algunas opciones que nos servirán para mejorar esta tarea. Pero no solo eso. La mayor parte de lo que vamos a conocer aquí no es útil sólo para la compilación de SASS. Nos servirá también para muchas otras tareas que podemos llevar a cabo con gulp de forma automatizada y fácil.

Estos primeros artículos son fundamentales para cualquier desarrollador actual, por lo que espero que los estés disfrutando y, sobre todo, interiorizando para adoptar el uso de estas tecnologías en tu día a día.

Para seguir adelante en este artículo, lo vamos a hacer a partir de lo que vimos en el anterior, por lo que, antes de seguir leyendo, asegúrate de tener en tu proyecto correctamente instalado el núcleo de gulp, así como los plugins que vimos en el artículo anterior, y que la compilación esté funcionando correctamente (si has seguido los pasos que dimos no tienes por qué tener ningún problema).

CREANDO UNA TAREA POR DEFECTO

En el artículo anterior aprendimos que, cuando creamos una tarea en gulp le damos un nombre, que luego debemos especificar en el comando de consola con el que llamamos a gulp. Ahora vamos a suponer que, en lugar de darle un nombre descriptivo (como hicimos antes, llamando a la tarea sass-compile) la llamamos default. En el archivo gulpfile.js, sustituye la siguiente línea:

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

por esta otra:

gulp.task ('default', ()=>

Ahora, cuando modifiques tu archivo styles.scss y quieras que gulp te lo recompile a styles.css ya no tienes que añadir el nombre de la tarea en la instrucción de consola que llama a gulp. Simplemente ejecutas el mandato gulp y él va a ir a buscar la tarea por defecto (la que se llama default).

VIGILANDO EL PROYECTO

Y ¿para qué nos sirve este comportamiento? Si sólo sirviera para teclear un comando más corto en la consola, poco uso práctico tendría. Sin embargo, con un método nuevo que vamos a ver aquí, la cosa cambia. De momento, vuelve a poner el archivo gulpfile.js como estaba antes del cambio que hemos hecho (llamando a la tarea sass.compile). Ahora vamos a crear otra tarea default, que lo que hará será «vigilar» constantemente que la tarea sass-compile se ejecute en tiempo real. Esto lo haremos con el método watch() del objeto que representa al núcleo de gulp. El archivo de tareas nos queda ahora así:

Observa las líneas resaltadas. Lo que hacemos es crear una tarea default. En ella podemos meter lo que queramos. En este caso metemos el método watch(), que recibe dos parámetros: el primero es el nombre del directorio que tiene que estar «vigilando» de forma constante. le hemos especificado que vigile todos los archivos con extensión .scss del directorio scss. El segundo parámetro es el nombre de la tarea que tiene que llevar a cabo cuando se produzca un cambio en los archivos que están siendo vigilados. Las tareas a realizar tienen que ir como una matriz (ya que podrían ser varias). Si sólo es una (como en este caso), se pasará como una matriz de un sólo elemento.

Cuando vamos a ejecutar este archivo, en la consola ejecutamos, simplemente, el mandato gulp. Eso carga la tarea default. Como esta, a su vez, llama a sass-compile, se leen los archivos de SASS y se compilan a CSS. Pero, esta vez, la ejecución de gulp no termina. Simplemente se queda «pendiente» (la consola parece bloqueada) y, cualquier cambio que hagas en tu archivo SASS original quedará, inmediatamente, reflejado en el archivo CSS. Prueba, por ejemplo, a cambiar un color y verás los cambios. A continuación, actualiza la página en tu navegador y verás el efecto de lo que has hecho. Si quieres interrumpir la ejecución de gulp en la consola, pulsa CTRL-C, y te devolverá el control a la línea de mandatos.

Y esta sí es la verdadera utilidad de poder crear una tarea default. Como podemos incluir todas las tareas necesarias en distintas instancias del método watch(), nuestro gestor de tareas puede llevar a cabo una vigilancia de distintos procesos que ejecutará en tiempo real. En posteriores artículos veremos ejemplos más elaborados, que nos permitirán darnos cuenta de lo que podemos hacer.

MODIFICANDO LA SALIDA CSS

Con el plugin gulp-sass no solo podemos compilar SASS a CSS. Además podemos añadirle un modificador, para que la salida CSS nos quede formateada de distintas maneras. Por ejemplo, tal cómo tenemos actualmente configurado nuestro gulpfile.js, la salida CSS tiene un aspecto, digámoslo así, bastante ordenado. A continuación ves un fragmento del archivo styles.css resultante:

Ahora vamos a modificar la tarea que hace la compilación, en el archivo gulpfile.js, así:

Con el mandato gulp en ejecución haz cualquier cambio en tu archivo SASS. Ahora el anterior fragmento de la salida CSS queda como ves a continuación:

La diferencia es sutil pero, si observas las líneas resaltadas, te darás cuenta de que, ahora, la llave de cierre de la declaración de estilos está en otra línea, al mismo nivel de indentación que la apertura.

Las opciones para outputStyle son 'expanded', 'compact', 'compressed' y 'nested' (esta última es la opción por defecto, es decir, equivale a no establecer este parámetro). Te dejo a ti la tarea de probarlas en el código, para ver sus distintos efectos. Recuerda que, cuando modifiques el archivo SASS original, el gulp estará «vigilando» para actualizar los cambios, pero cuando modifiques gulpfile.js tienes que detenerlo (con CTRL-C, recuerda) y volver a ejecutarlo.

COMENTARIOS RELATIVOS A LA COMPILACIÓN

Cuando nuestros archivos SASS son grandes (y, lógicamente, los resultados en CSS son más grandes aún), resulta muy útil agregar comentarios en cara regla CSS relativos a la parte de SASS que ha dado lugar a dicha regla CSS. Para ello podemos añadir el parámetro sourceComments con la opción true. Observa la siguiente versión de gulpfile.js:

Ahora observa un fragmento del CSS resultante, para que veas como quedan esos comentarios:

Con archivos muy grandes o complejos, es una estupenda ayuda para la depuración o el mantenimiento. Hablaremos sobre la depuración de las compilaciones de SASS en el próximo artículo.

CONCLUYENDO

En este artículo hemos aprendido la utilidad de la tarea default y del método watch(). También hemos aprendido algunas utilidades interesantes soble la compilación de SASS a CSS con gulp. En el próximo artículo continuaremos hablando sobre la depuración. El directorio de este proyecto (esta vez con gulp y los plugins incluidos) lo puedes descargar en este enlace.

   

Deja un comentario