primeros pasos con Gulp
artículos

Primeros pasos con Gulp.js

Todos los que nos dedicamos al desarrollo de aplicaciones sabemos la cantidad de tareas repetitivas que tenemos que abordar una y otra vez. Esos días se terminaron hace ya algún tiempo en realidad con la llegada de Grunt.js, un gestor de tareas basado en Javascript. Antes de empezar con Gulp.js, te diré que los dos gestores hacen lo mismo, yo simplemente me decanté por Gulp por que me pareció más rápido y sencillo que Grunt, pero para gustos, colores.

Antes de empezar a utilizar Gulp has de tener instalado Node y npm, ya que son necesarios para la instalación y el funcionamiento de Gulp. A partir de este punto tienes dos opciones según tus preferencias:

Puedes instalarlo globalmente y acceder a los comandos de Gulp desde cualquier proyecto usando el siguiente comando de npm en el terminal

O puedes instalarlo como una dependencia de desarrollo para usarlo en un proyecto específico así:

Una vez instalado, usando el método que para ti sea más conveniente, tienes que crear un documento de Javascript llamado gulpfile.js en el directorio raíz de tu proyecto. Es importante que ese sea el nombre del archivo ya que Gulp irá a buscar específicamente éste cuando se inicie.

TAREAS (TASKS)

Imagina por un momento que tienes un montón de archivos en Sass o Less. Yo, como todos, tengo instalado un programita en mi mac que regenera el código css cada vez que guardo mis archivos en Sass o Less ( normalmente cuando trabajo en LAMP). Este programa se encarga de recorrer todos los archivos, concatenarlos y crear un css “minificado” que es óptimo para producción. Supongo que tú haces lo mismo ( y si no lo haces, deberías), sin embargo el alcance de estos “programitas” o procesadores, es limitado, ya que su tarea termina ahí mismo, con el código “minificado”, y además sólo en el ámbito de los pre-procesadores css.  Pasa lo mismo, por ejemplo con archivos js, que una vez terminados quieres concatenarlos y minificarlos para que ocupen el menor espacio en producción. Gulp es la herramienta perfecta para estas tareas que son repetitivas, además de obligatorias para un buen desarrollador.

Vamos a fijarnos en este pequeño trozo de código dentro de gulpfile.js. Hemos instalado vía npm: Gulp y gulp-uglify, éste último como dependencia de desarrollo:

Los hemos requerido dentro del archivo gulpfile.js, y hemos creado una tarea, que como habrás imaginado ya, se declara con un simple gulp.task. Todas las tareas tienen que ser invocadas por su nombre en Gulp, yo he puesto a esta tarea el nombre de minify. También hay un nombre de tarea reservado por Gulp llamado default y la tarea con este nombre se ejecuta directamente al lanzar Gulp. Dentro de esta tarea también hay una función, y dentro de la función está lo que la tarea tiene que hacer cuando es invocada.

STREAMS

Dentro de la función se encuentran lo que en Gulp se hacen llamar “Streams”, (también hay gente que los llama simplemente “pipes” o “tuberías”.) Lo importante es que sepas que los streams son pequeñas funciones que se encargan de hacer “algo” con el contenido que le has pasado y pasarlo al siguiente stream para que éste a su vez haga algo y siga pasándolo hasta que termine la tarea. Por ejemplo, en el caso anterior, cogemos de el archivo app.js, se lo pasamos al siguiente stream que se encarga de “minificarlo” y cuando termina, lo pasa al siguiente stream que lo guarda en el directorio build.

PLUGINS

En Gulp existen infinidad de plugins. En el ejemplo anterior te hemos mostrado uno ( gulp-uglify), pero hay cientos de ellos que ayudan en infinidad de tareas.

Cargar un plugin es sencillo, lo instalas como dependencia de desarrollo como hemos visto en el ejemplo anterior, después sólo tienes que “requerirlo” en el archivo gulpfile.js conjuntamente con Gulp y otros plugins que quieras utilizar. Cada plugin, a pesar de funcionar más o menos de forma similar tiene sus diferencias, así que asegúrate de leer cuidadosamente la documentación al respecto ( RTFM).

WATCH

Gulp tiene una habilidad muy interesante, ésta te permite tener vigilados los archivos que desees y, en el momento en el que cambien por alguna razón, ejecutar las tareas que quieras.

La sintaxis, como de costumbre, es muy sencilla

Seguramente ya habrás adivinado que hace este pequeño bloque de código. Básicamente cuando hay algún cambio en cualquier archivo Javascript dentro de la carpeta js se ejecuta la tarea “minify”.

Dentro de la tarea watch puedes meter todas las subtareas que quieras. Para ejecutar esta tarea maestra sólo tienes que ejecutar en la consola

Bueno, esto es sólo un pequeño ejemplo de lo que puede hacer Gulp por ti. Te animo a que sigas investigando sobre esta tremenda herramienta que, sin duda, hará tu vida de desarrollador más fácil.

Next Post

No Comments

Leave a Reply