Gulp.js es un gestor de tareas en Javascript que nos va ayudar a automatizar tareas repetitivas en nuestro proyecto Drupal. Una de las que mas vamos a repetir mientras estamos desarrollando es compilar el tema para generar el CSS si estamos utilizando un preprocesador como SASS o Less, con el tema de Bootstrap, por ejemplo, o con nuestro propio tema 'custom'.

Añadir Gulp a nuestro tema para compilar nos proporciona unas cuantas ventajas, entre las que podemos destacar:

  • Recompilar el tema automáticamente cada vez que modificamos un archivo less.
  • Y recargar automáticamente el navegador cuando cambia el CSS.
  • Minificar el CSS para mejorar el rendimiento.
  • Ejecutar test y chequear el código al compilar el tema, para controlar errores de sintaxis, estándares, etc.
  • Gestionar dependencias y minificar nuestros ficheros Javascript.
  • Realizar operaciones con ficheros: copiar, mover, borrar, etc.

En un caso bastante particular necesitaba detectar si cambiaba la visibilidad de un elemento del DOM que venia de una librería externa de JS. Después de dar algunas vueltas encontré una solución bastante elegante, publicada hace bastante tiempo. No he visto nada parecido en castellano, y hay algunos hilos en Stackoverflow, pero con soluciones bastante extrañas, así que lo publicaré aquí.