Gulp. Otro automatizador de tareas mas.

Lo bueno de ser desarrollador es que todo avanza a una velocidad increíble, y siempre tienes nuevas tecnologías, herramientas, técnicas y cosas para jugar. El dia de hoy les quiero hablar de una herramienta 'relativamente' nueva. Se llama Gulp y es un automatizador de tareas que funcione sobre NodeJS. Ojo, eso no significa que solo se usa para Node, lo puede usar tranquilamente en cualquier proyecto, aunque mas generalmente sea un proyecto web (CSS, JS, HTML, PHP, Node, GIT, FTP, etc etc).

Ya habiamos hablado de otro automatizador de tareas en el blog: Grunt. Pero Gulp esta poniendose de moda y vamos a ver porque.

Que es un automatizador de tareas?

Claro, hay gente que no conoce ni siquiera Grunt asi que voy a explicar todo desde el principio.

Seguramente si eres desarrollador web hay tareas que haces de manera repetitiva y manual muchas veces en cada proyecto. Ej:

La cuestion es que no deberias estar realizando estas tareas manualmente. Se debe poner en automatico todo lo que se pueda. En especial si son proyectos medianos/grandes. Entonces un automatizador de tareas como Gulp hace exactamente eso.

Gulp vs Gruntgulp-2x

En esencia ambos hacen las mismas tareas. Asi que si ya sabes usar Grunt no creo que valga la pena cambiar. Pero tienen unas diferencias:

  • Gulp es mas rapido. O al menos eso dicen todos. Ya saben que esto de los tests de velocidad, rendimiento y demas siempre dependen de quien los haga.
  • Gulp tiene archivos de configuracion mas claros y sencillos. Grunt usa JSON y el otro solo Javascript.
  • Gulp tiene algunas funcionalidades basicas integradas que en Grunt se hacen con plugins. Ej: watch
  • Las tareas de Gulp son minimas. O sea que cada plugin o tarea hace solo una cosa y nada mas. En Grunt podian llegar a hacer varias cosas para obtener un resultado.
  • Pero la diferencia mas importante que le encontre fue la forma en la que debes pensar para usar uno u otro.

En Grunt lo que hacias (mentalmente) era agarrar un archivo o grupo de archivos y los pasabas por una tarea. Luego otra tarea agarraba esos archivos modificados y los modificaba para hacer otra cosa. Y asi con cada tarea. Se puede resumir en como en el siguiente grafico.

flujo con grunt
flujo con grunt

En Gulp lo que debes pensar es que agarras un archivo y lo pasas por un tubo (pipeline) de modificaciones para finalmente obtener el resultado que deseas. Algo asi:

Gulp flujo
Gulp flujo

Mini Tutorial de Gulp

En este ejemplo lo que voy a hacer es simplemente concatenar archivos javascript.

Paso 1: Instalar Gulp si no lo tienen. Solo deben ejecutar el siguiente comando. Solo es necesario hacer esto una vez por pc. Y obvimante necesitan tener node y npm que seguramente estan en los repositorios de su distribucion Linux.

sudo npm install gulp -g

Paso 2: Abrimos una consola en el directorio donde esta nuestro proyecto.

Paso 3: En ese directorio debemos instalar Gulp localmente.

npm install gulp --save-dev

Esto va a crear la carpeta node_modules con otras carpetas y archivos dentro.

Paso 4: Ahora toca instalar los plugins que deseemos. En este ejemplo sera solo uno, el que necesitamos para concatenar archivos.

npm install gulp-concat --save-dev

Paso 5: Ahora dentro de la carpeta de su proyecto vamos a crear un archivo llamado gulpfile.js y dentro colocaremos lo siguiente:

var gulp = require('gulp'),
	concat = require('gulp-concat');

gulp.task('concatenar', function() {
  return gulp.src('src/scripts/**/*.js')
    .pipe(concat('main.js'))
    .pipe(gulp.dest('dist/assets/js'));
});

Lo primero que hace es definir gulp y cada uno de sus plugins. Cada uno ira con un "var algo".

Siguiente se corre una tarea (gulp.task). A la que le ponemos el nombre que nos de la gana, en mi caso "concatenar".

Luego con gulp.src definimos el archivo o conjunto de archivos con los que iniciaremos. En el ejemplo son todos los archivos .js que esten en la carpeta src/scripts y sus subcarpetas.

Y por cada cosa que deseemos hacer con esos archivos vamos a usar un .pipe. En el ejemplo usamos 2. El primero lo que dice es: concatena todo en el archivo main.js. Y el segundo lo que hace es: escribir ese archivo resultante en la carpeta dist/assets/js

Muy sencillo verdad?

Paso 6: Desde la consola podemos ejecutar esa accion usando el comando:

gulp concatenar

Y eso es todo. Si quisieramos agregar mas cosas por hacer solo hay que seguir estos pasos:

  1. Instalar el plugin.
  2. Agregarlo en la zona de los 'var'.
  3. Y agregar un .pipe para que haga las modificaciones que deseamos a los archivos.

Seguramente tambien querran que esta tarea se ejecute automaticamente cuando se modifican los archivos fuente. Para eso solo basta con agregar a gulpfile.js lo siguiente:

gulp.task('watch', function() {

  gulp.watch('src/scripts/**/*.js', ['concatenar']);

});

Como ven no es dificil entender como funciona. Revisa si hay cambios y si los hay ejecuta 'concatenar'. Y entonces podran ejecutar en la consola esa tarea con:

gulp watch

Y por ultimo tambien pueden definir una tarea default. En mi caso yo siempre defino la tarea 'watch' como default. Para ello solo agrego lo siguiente:

gulp.task('default', ['watch'], function() {
console.log('Have fun!');
});

Esto nos permite simplemente escribir un comando mas corto en la consola.

gulp

Y como ven, dentro de la misma funcion puedo ejecutar el codigo js que quiera...si hiciera falta.

Sitio oficial de Gulp: http://gulpjs.com/
Plugins aqui: http://gulpjs.com/plugins/
Y aqui: http://gratimax.net/search-gulp-plugins/

Se bueno y comparte!
Publicado el Categorías Diseño y Desarrollo Web

Acerca de Perro

Ingeniero en Informática. Programador en PHP y Angular. Lo que mas adoro en el mundo es el conocimiento. Y el anime....y Japón...y el running...y bloguear claro y algunas otras cientos de cosas. Sigo buscando la manera de hacer mi primer millón.

Comenta!

4 Comentarios activo "Gulp. Otro automatizador de tareas mas."

avatar
Ordenar por:   Nuevos | Viejos
Ubuntulover
Ubuntulover

Al fin has vuelto :D

sefsinalas

Si. El ultimo año de la facultad fue jodido. Pero ya termine :)

Nxz07
Nxz07

Que bueno ver que vuelves :)

sefsinalas

Gracias por seguir por aqui

wpDiscuz