Captura de excepciones con gulp

En un artículo reciente hablábamos de los errores con gulp. Establecimos unas normas básicas para evitar los errores. Sin embargo, durante la edición de un archivo SASS, por ejemplo, podemos causar errores que interrumpan la ejecución de gulp. En este artículo vamos a ver cómo tienen lugar estos errores, y que hacer para soslayarlos.

Cómo te comenté en el artículo anterior, es imposible encontrar una solución que nos de todas las respuestas para evitar o solucionar todos los errores. Sin embargo, lo que sí es posible es gestionarlos de modo que, al menos, cuando se produzcan, sean menos molestos, y tengamos la opción de corregirlos con mayor comodidad.

Para ello debemos contar con un plugin específico (ya sabes que en gulp todo es a base de plugins), que nos ayudará a minimizar el impacto de los errores en nuestro trabajo. Se llama gulp-plumber, y vamos a conocerlo en este artículo.

EL ESCENARIO

Vamos a partir de un escenario en el que tenemos un gestor de tareas para transpilar SASS a CSS. Si bien son muchas las tareas diferentes que gulp puede llevar a cabo y, sin duda, estás pensando que soy muy insistente con la transpilación de SASS, me estoy ciñendo a esto porque nos va a permitir montar muy fácilmente un escenario donde veamos el comportamiento de este control de excepciones.

Lo primero que vamos a hacer es crear un fichero SASS muy simple. Lo llamamos ejemplo_1.scss:

Cómo ves, es un SASS muy sencillo, que no tiene nada de particular. Si tienes dudas acerca de la sintaxis de SASS, puedes familiarizarte con ella en estos artículos.

También vamos a suponer que estamos trabajando con un editor de texto, como Visual Studio Code o WebStorm, que tienen una función de autoguardado, de modo que cada tecla que pulsas, o cada vez que borras o escribes un carácter se guarda el fichero automáticamente. Si tienes gulp activado con una tarea default que «vigila» el fichero SASS (con watch, como aprendimos a hacerlo en este artículo) con cada pulsación se lanza la tarea de transpilación.

Nuestro fichero gulpfile.js es el que ya conocemos:

Ahora activa el gestor de tareas, abriendo tu consola de mandatos y tecleando gulp. Vamos a editar el original en SASS. Por ejemplo, en la siguiente línea:

content: "caja";

borra la primera comilla, de forma que quede así:

content: caja";

Esto puede darse. Estás editando el fichero y borras este carácter. Como el editor tiene autoguardado, el fichero se guarda, y el gestor de tareas detecta un cambio, y trata de transpilar. Sin embargo, cómo la línea, en este momento tiene un error, se lanza una excepción, y se interrumpe la ejecución del gestor de tareas, con un resultado en consola como el siguiente:

CONTROLANDO LA EXCEPCIÓN

Evidentemente, esta no es una situación deseable. Los editores con autoguardado son cada día más comunes, por lo cómoda que resulta la edición. Sin embargo, si cada modificación que vamos a hacer en nuestro archivo SASS original tenemos que arrancar de muevo el gestor de tareas, es un verdadero engorro. Vamos a instalar el plugin gulp-plumber, que nos va a evitar esta molestia. En la línea de mandatos teclea:

npm install --save-dev gulp-plumber

Tras unos segundos, se habrá instalado el plugin. Ahora tenemos que modificar nuestro gestor de tareas para que cargue el plugin, y para que haga uso del mismo. El archivo gulpfile.js queda así:

Observa las líneas resaltadas. En la línea 4 ves como creamos un objeto de JavaScript con el nuevo plugin, de la misma forma que ya lo hemos hecho con los otros plugins cargados.

En la línea 9 ves cómo usamos el objeto que hemos creado (al que hemos llamado plumber), que representa al plugin gulp-plumber. Presta especial atención a que ponemos esta llamada al principio de la tarea que se encarga de la transpilación. Está justo después de establecer el origen de los ficheros (el método src() no es un plugin, sino un método del núcleo de gulp), y antes de llamar al primer método de la tarea. Esto va a hacer que gulp-plumber() controle cualquier excepción que se produzca en la tarea.

Ahora, si durante la edición dejas tu archivo SASS con un error cómo el que hemos visto en el ejemplo anterior, en la consola gulp te muestra un mensaje de excepción como el siguiente:

Sin embargo, no se interrumpe la ejecución de gulp. Sin necesidad de intervención específica por tu parte, tan pronto cómo tengas el SASS corregido, se realiza de nuevo la transpilación, generándose el CSS correspondiente.

Esto significa que no hemos logrado evitar el mensaje de error. Pero sí hemos evitado el engorro de tener que volver a arrancar gulp. Si sólo sucede una o dos veces, no es relevante. Sin embargo, cuando se está editando un SASS, esto ocurre en repetidas ocasiones en muy poco tiempo, y tener que iniciar de nuevo el gestor de tareas puede llegar a ser muy molesto. El plugin gulp-plumber nos evita esta molestia.

Y SI NO FUNCIONA…

Debido a la gran cantidad de plugins que puede tener gulp, y a comportamientos muy específicos en determinados sistemas operativos, es posible que el plugin gulp-plumber no te funcione correctamente en ciertos casos en entornos Windows. En concreto, es posible que, después de mostrar el mensaje de error por consola, no sea capaz de devolver el control a la tarea que estás ejecutando, obligándote a abortar manualmente la ejecución ce gulp (pulsando Ctrl-C en la consola) y arrancarlo de nuevo. Así, no sólo no hemos solucionado el problema, sino que lo hemos empeorado.

La solución pasa por añadir una instrucción que «fuerce» al plugin gulp-plumber a terminar su trabajo, una vez que ha capturado una excepción, de modo que devuelva el control al gestor de tareas, sin que tú tengas que intervenir manualmente en nada. Observa la línea destacada en el siguiente archivo gulpfile.js:

Y SI SIGUE SIN FUNCIONAR…

Como ya te he comentado, puede que el control de excepciones no te funcione adecuadamente. Esto puede deberse a múltiples factores: el sistema operativo empleado (Linux es, como sabes, más estable que Windows), la versión de NodeJS, gulp o los plugins que tengas instalada, etc.

En mi caso, te puedo decir que habitualmente trabajo con dos ordenadores diferentes. En uno de ellos, gulp-plumber me funciona perfectamente. En el otro, sin embargo, cuando se produce un error en el SASS, me muestra el mensaje, pero me bloquea gulp, y tengo que reiniciar la consola.

Afortunadamente, existen alternativas para todo. Gulp es un ecosistema muy variopinto, y existe un plugin muy interesante para los casos en que gulp-plumber no funcione: se trata de gulp-error-handle. Lo instalamos, como siempre, abriendo la consola en la raíz de nuestro proyecto y escribiendo:

npm install --save-dev gulp-error-handle

En el archivo gulpfile.js, en lugar de usar gulp-plumber, emplearemos gulp-error-handle, como se muestra a continuación:

Esto soluciona el problema, evitando tener que reiniciar el gestor de tareas, cuando el plugin anterior no funciona adecuadamente.

Como siempre, en este enlace tienes los archivos necesarios para experimentar con lo que hemos visto en este artículo.

   

Deja un comentario