Gulp: Conociendo cada hueso

28 de noviembre de 2016
3 min. de lectura

Creemos que es hora de ir más en detalle. Quizás puedas sentir que el orden de estos artículos está un poco confuso, pero la verdad cada post es independiente, la idea es que usted mismo cree el orden que quiera ya que cada uno de nosotros aprende a su propio ritmo. 

En este episodio vamos a detallar gulp como un cuerpo humano, vamos a ir por cada extremidad entendiendo nuevos conceptos y reforzando otros más. 

Gulp 

Este es el comando principal de todo el archivo gulpfile.js que se puede ver en los episodios anteriores. El comando gulp nos ayuda a definir la etapa o segmento que estamos trabajando. Una de las formas de entender el cómo trabaja gulp es teniendo una analogía de las etapas de gulp con respecto al código. 

Cuando definimos una tarea usamos el siguiente comando: 

gulp.task(‘tarea’, [‘dependencia 1’, ‘dependencia 2’, ‘dependencia n’], function(){

 

});

Vamos por cada parte de ese esqueleto: 

Task 

Este comando dentro del comando gulp señala que estamos definiendo una tarea. 

Tarea 

Este es el nombre de la tarea que vamos a definir, recordemos que cuando declaramos una tarea con el nombre “default” desde la consola de comandos solo es necesario ejecutar el comando gulp y se ejecutará sin problemas. 

Dependencias (opcional) 

Lo que llamamos dependencias en la estructura anterior son simplemente tares que se deben ejecutar primero antes que la tarea principal definida, cuando las dependencias terminen de realizarse se procederá a ejecutar la tarea principal. Sin embargo hay un detalle entre lo que es ejecución en serie y en paralelo de la cual hablaremos más adelante. 

Function

La función define en su interior la tarea que se va a realizar. Es aquí donde ponemos el código javascript necesario para llevar a cabo nuestro objetivo. 

Llevando estos conceptos a un ejemplo real tenemos el siguiente fragmento de código: 

gulp.task('concat', function() {
   gulp.src(['module.js', 'controller.js'])
       .pipe(concat('main.js'))
       .pipe(gulp.dest('./'))
});

Flujo de ejecución 

Existe un flujo de ejecución para gulp. En la sección anterior les comentamos que existía una manera diferente de ejecutar las tareas dependientes, en serie o en paralelo. Pues bien acá vamos a explicar en que consiste.

Para empezar tenemos la siguiente estructura: 

gulp.task('createMainJs', ['uglify'] function() {
   return gulp.src(['module.js', 'controller.js'])
       .pipe(concat('main.js'))
       .pipe(gulp.dest('./'))
});

Pues bien, hemos declarado la tarea createMainJs la cual no se va a ejecutar hasta que finalice la ejecución de la tarea uglify. Esto es lo que se conoce como tareas en serie. Pero ahora veamos el siguiente código:

gulp.task('createMainJs', ['uglify', 'jsHint', 'jscs'] function() {
   return gulp.src(['module.js', 'controller.js'])
       .pipe(concat('main.js'))
       .pipe(gulp.dest('./'))
});

Vemos que en el bloque de dependencias tenemos las siguientes tareas [‘uglify’, ‘jsHint’, ‘jscs’] Esto no quiere decir que se van a ir ejecutando precisamente en ese orden y que cuando finalice la última se ejecutará createMainJs. Lo que quiere decir es que todas estas tareas se van a ejecutar en paralelo y cuando una de ellas finalice se ejecutará createMainJs, lo que indica que es posible que createMainJs se ejecute sin siquiera haber finalizado uglify por ejemplo. 

Esto nos indica que debemos ser ordenado al momento de crear y ordenar la ejecución de nuestras tareas para no tener conflictos entre ellas. 

Etapas 

Como lo hablamos anteriormente existen etapas en el flujo de tareas de gulp. Llegó el momento de detallarlas: 

Quién – Qué – Dónde 

Acá la hemos definido así. No es necesariamente la definición técnica, pero queremos que quede lo bastante claro. 

Quién 

En este segmento definimos qué archivo(s) vamos afectar, cuales de ellos van a sufrir cambios por la tarea que estamos definiendo. 

Qué

Define qué cambios vamos a realizar, pueden ser uno o varios dependiendo de cómo hagamos el desarrollo.

Dónde

Es el destino donde se van almacenar esos cambios que realizamos sobre esos archivos. 

Para ver esto más claramente, tenemos el siguiente segmento de código: 

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

 

gulp.task('concat', function() {
   gulp.src(['module.js', 'controller.js'])
       .pipe(concat('main.js'))
       .pipe(gulp.dest('./'))
});

Como podemos ver existe un comando llamado gulp.src que define los archivos que vamos afectar, este para nosotros es el Quién. Seguidamente tenemos la tarea conocida comoconcat que hemos declarado previamente, este es el Qué, significa que es lo que vamos hacerle a esos archivos que hemos tomado. Y por último tenemos gulp.dest que define el Dónde, es el lugar adonde vamos almacenar los resultados del cambio que hemos realizado sobre los archivos de origen. 

De esa forma podemos comprender todas las acciones y pasos que involucra gulp al momento de realizar una tarea definida por nosotros. No olviden que si tienen cualquier duda o comentario pueden dejarlo al final de este artículo. 

Nos vemos en un próximo post.

Te puede interesar

Otros artículos de Desarrollo de software

Suscríbete