Comunidad Front: Automatizando el día a día con Gulp

La semana pasada recibimos el verano con un nuevo encuentro de la Comunidad Front de Tanta y Grupo Onetec.

Queríamos reunirnos antes de empezar la jornada de verano, antes de que la gente eche las chanclas en la maleta para irse a la playita, en fin, esas cosas que se hacen en verano.

En esta ocasión, el encuentro se centró en un tema específico, Workflow con Gulp. Estuvimos viendo como ciertas herramientas nos pueden facilitar nuestro día a día, ya sabes, para que repetir tareas, si el ordenador lo puede hacer por nosotros…

La charla comenzó con una breve introducción de las herramientas que se iban a utilizar: Nodejs, NPM y Gulp.

Acto seguido se explicó como crear un workflow desde 0 simplemente con dos archivos package.json y gulpfile.js, a muchos de vosotros seguro que os suenan.

También se explicaron las diferencias que hay con el otro gran automatizador de tareas, Grunt: que son la forma de crear y generar las tareas.

Mientras que Gulp utiliza javascript para crear las tareas, Grunt tiene un archivo de configuración. Para generar las tareas, Gulp utiliza los streams (hace los procesos en la memoria y solo utiliza el disco para guardar) mientra que Grunt accede constantemente al disco duro, lo que hace que el proceso sea más lento.

Una posible desventaja de Gulp frente Grunt puede ser el número de plugins que puedes encontrar, pero esa distancia se reduce cada día y los hay para la mayoría de tareas cotidianas.

Después hicimos un ejemplo sobre un proyecto real y se evidenció que sobre todo la recarga automática del navegador puede ahorrar muchísimo tiempo, ya sabes, te olvidas de pulsar CTRL + F5 cada vez que quieres ver un cambio… los que lleven un tiempo desarrollando se acordarán de lo desgastadas que tenían esas teclas.

En ese ejemplo se creó un gulpfile con tareas para convertir ficheros jade a html, scss a css minificados, compresión de imágenes y minificado y concatenación de archivos javascript. Además también se implementó browserSync para la recarga automática del navegador cuando, por ejemplo, modificas un estilo o los archivos jade.

Para acabar el encuentro, se hizo un pequeño debate para que todos pudiésemos opinar sobre lo visto. Al final, parece que todos coincidimos en que puede ser bastante positivo que lo utilicemos en nuestro día a día, frente a otras soluciones que ya estamos usando.

Os dejo un enlace a las diapositivas que se utilizaron y una adaptación del código, por si sentís curiosidad:

DiapositivasCódigo en GitHub

Sergio Cibanto

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ir al contenido