En el último artículo hablamos sobre Grunt. Puedes consultar este artículo en el siguiente enlace:
Conociendo Grunt: El Task Runner en JavaScript
Cuando se lanzó en 2012, Grunt tuvo mucho éxito y comenzó a ser utilizado por muchos desarrolladores. Sin embargo, en 2013, se lanzó Gulp y hoy en día es mucho más utilizado y conocido, con la impresionante cifra de aproximadamente 1.300.000 descargas por semana.
En este artículo hablaremos sobre sus recursos, ya enfocándonos en su última versión, 4.0, y podremos entender por qué es tan utilizado. La verdad es que Gulp es bastante simple de implementar y más rápido que Grunt. Además, su archivo de configuración es más pequeño. Todo esto hace que muchas personas opten por usar Gulp.
Para poder realizar una comparación entre estas dos herramientas de automatización, usaremos el mismo proyecto que creamos en el artículo anterior, pero ahora usaremos Gulp.
¿Cómo instalar Gulp?
Gulp, al igual que Grunt, fue desarrollado en JavaScript y se ejecuta en Terminal. Por eso, usaremos Node.js una vez más. Recordando que si no tienes Node, puedes ver nuestro video en YouTube donde enseñamos a instalar esta herramienta, haciendo clic aquí.
Ahora vamos a instalar Gulp a través de la línea de comando. Para ello, ejecuta lo siguiente en el Terminal:
npm install gulp-cli -g
Con este comando instalaremos el CLI de Gulp en nuestra computadora de manera global, haciéndolo accesible en cualquier proyecto.
Agregando Gulp al Proyecto
La estructura de carpetas será igual a la del proyecto en Grunt. Será necesario iniciar un proyecto en Node en este directorio. Así que ejecutaremos npm init -y en nuestro Terminal.
El primer módulo que instalaremos es el propio Gulp. Ejecutaremos el siguiente comando:
npm install gulp --save-dev
El siguiente paso será crear un archivo llamado gulpfile.js en nuestro directorio raíz. Realizaremos la importación del módulo de gulp con la siguiente línea de código:
const gulp = require('gulp');
Ahora estamos listos para desarrollar nuestros ejemplos. Quizás ya hayas visto en alguna documentación o tutorial sobre gulp.task(), responsable de crear una tarea en Gulp. Este método aún existe. Sin embargo, en la versión 4.0, la forma de crear tareas cambió un poco. Ahora se recomienda que creemos una función que definirá lo que la tarea realizará. Luego, debemos exportar esa función a través de exports de Node con un identificador. Y ese identificador será reconocido como el nombre de la tarea. Vamos a crear un primer ejemplo para entender esto mejor. Crearemos la tarea que unirá todos los archivos CSS en uno solo y luego lo minificará.
Para esta primera tarea, necesitaremos tres módulos: 1) gulp-concat (responsable de juntar los archivos), 2) gulp-cssmin (responsable de minificar los archivos) y gulp-rename (responsable de cambiar el nombre de los archivos, si lo deseamos). Para instalar los tres de una vez, ejecutaremos el siguiente comando:
npm install gulp-concat gulp-cssmin gulp-rename --save-dev
Para realizar la importación de ellos en el proyecto, usaremos el siguiente código:
const concat = require('gulp-concat');
const cssmin = require('gulp-cssmin');
const rename = require('gulp-rename');
Vamos a crear nuestra primera función, que llamaremos stylesMethod(). Tendrá la siguiente sintaxis:
function stylesMethod() {
return gulp.src("./assets/css/*.css")
.pipe(concat("all.css"))
.pipe(cssmin())
.pipe(rename({ suffix: ".min" }))
.pipe(gulp.dest("./dist"))
;
}
Explicando: usamos el método src() del módulo gulp para encontrar todos nuestros archivos CSS dentro de la carpeta deseada. También usamos el método pipe(), que está asociado con un concepto muy interesante de Node.js que son los streams. Este método es uno de los grandes responsables por la excelente performance de Gulp.
Dentro de cada método pipe() ejecutamos alguna función. Ejecutamos concat(), indicando el nombre del archivo que se generará tras la concatenación, usamos cssmin() para realizar la minificación de este mismo archivo, hacemos la llamada a rename() para agregar el sufijo “.min” al archivo final y por último usamos otro método de Gulp llamado .dest() para definir el directorio donde deseamos que el archivo final sea guardado. Solo un detalle: es muy importante que usemos el return en las funciones, para que ningún error sea devuelto en el Terminal.
Y nuestra función ya está lista. Ahora necesitamos exportarla como una tarea. Para ello, basta con usar la siguiente línea de código al final del archivo:
exports.styles = stylesMethod;
La tarea se llamará styles. Para probarla, basta ejecutar lo siguiente en el Terminal:
gulp styles
Al hacer esto, vemos el siguiente resultado:
La tarea se ejecutó correctamente y sin errores. Si vamos a la carpeta dist, encontraremos el archivo all.min.css, con el siguiente contenido:
Nuestro archivo fue correctamente minificado y concatenado, y nuestra tarea quedó mucho más simple en comparación con el archivo de Grunt. Mucho más simple, ¿no crees?
Haremos lo mismo para los archivos JavaScript. Solo descargaremos el módulo gulp-uglify para la minificación de los archivos (podríamos usar gulp-jsmin también si lo deseáramos). Para realizar su instalación, ejecutaremos el siguiente comando:
npm install gulp-uglify --save-dev
La importación de este módulo en nuestro código será así:
const uglify = require('gulp-uglify');
Y crearemos una función llamada scriptsMethod(), que tendrá la siguiente sintaxis:
function scriptsMethod() {
return gulp.src("./assets/js/*.js")
.pipe(concat("all.js"))
.pipe(uglify())
.pipe(rename({ suffix: ".min" }))
.pipe(gulp.dest("./dist"));
}
Nota que pudimos reutilizar los otros módulos que ya habíamos instalado. Solo uglify() fue diferente. Para exportar esta función como una tarea, usaremos el siguiente código:
exports.scripts = scriptsMethod;
Para probar esta tarea, ejecutaremos gulp scripts en nuestro Terminal. El resultado será el siguiente:
¡La tarea se ejecutó correctamente, excelente! Si vamos al directorio dist, encontraremos el archivo all.min.js, con el siguiente contenido:
Es realmente más práctico usar Gulp. Antes de continuar, haremos solo una pequeña refactorización. El módulo de Gulp es muy amplio. Por lo tanto, realizar el require de su módulo completo puede hacer que nuestro proyecto sea un poco más pesado. Una alternativa para resolver esta cuestión es usar el recurso de Asignación por Desestructuración (palabra difícil, ¿eh?), que fue implementado en la versión ES6 de JavaScript, o EcmaScript2015. Esta asignación consiste en realizar el require de solo una parte del módulo, usando llaves para ello. En el caso del módulo de gulp, usamos dos métodos: src() y dest(). Para realizar la solicitud de solo esos dos recursos, dejaremos la primera línea del archivo gulpfile.js así:
const { src, dest } = require('gulp');
De esta manera nuestro código es más ligero. Y ahora, en lugar de llamar a gulp.src() o gulp.dest(), usaremos solo el nombre de los métodos, lo que hará que nuestras funciones queden de la siguiente manera:
function stylesMethod() {
return src("./assets/css/*.css")
.pipe(concat("all.css"))
.pipe(cssmin())
.pipe(rename({ suffix: ".min" }))
.pipe(dest("./dist"));
}
function scriptsMethod() {
return src("./assets/js/*.js")
.pipe(concat("all.js"))
.pipe(uglify())
.pipe(rename({ suffix: ".min" }))
.pipe(dest("./dist"));
}
Puedes aprender más sobre los recursos de EcmaScript2015, así como de todo JavaScript en nuestro Curso Completo de JavaScript, donde creamos siete proyectos reales usando este increíble lenguaje.
Ahora que realizamos esta pequeña refactorización, implementemos el último módulo, el watch(). A diferencia de Grunt, que necesitamos descargar un módulo externo para esta tarea, Gulp tiene un módulo propio para ello. Para realizar la importación de él en nuestro proyecto, solo hay que agregar el watch en nuestra asignación por desestructuración:
const { src, dest, watch } = require('gulp');
Crearemos una función que vigilará el cambio en los archivos de nuestros directorios. Su contenido será el siguiente:
function watchFiles() {
watch("./assets/css/*.css", stylesMethod);
watch("./assets/js/*.js", scriptsMethod)
;
}
Explicando: no es necesario definir el return para el método watch(). Lo ejecutamos dos veces. El primer parámetro de este método es informar los archivos que deben ser “vigilados”, y el segundo parámetro define la función que se ejecutará cuando los archivos sean alterados.
Vamos a exportar esta función como el método predeterminado de Gulp. Así, al ejecutar solo gulp en el Terminal, ya estaremos vigilando las alteraciones en los archivos. Para realizar esta exportación, definiremos la función en la propiedad default de exports, con el siguiente código:
exports.default = watchFiles;
Ahora, cuando ejecutamos gulp, vemos el siguiente resultado en el Terminal
Y, al cambiar cualquier archivo JS o CSS, veremos lo siguiente:
Vemos que las tareas se ejecutan y Gulp sigue vigilando las alteraciones por nosotros.
Conclusión
A través de estos ejemplos conseguimos entender los recursos de Gulp, junto con las novedades de su versión 4.0. Nos damos cuenta de que es realmente más simple, más legible y fácil de implementar en nuestros proyectos. Además, es muy rápido. Si tienes dudas sobre si debes usar o no Gulp, puedes instalarlo sin miedo, ¡es una herramienta sensacional!
Puedes encontrar los códigos desarrollados en este artículo en nuestro GitHub.
Si te gustó este contenido, no dejes de compartirlo con otros, eso nos ayuda mucho. ¿Tendrías algún otro tema (lenguaje, herramienta, tutorial) que te gustaría leer en nuestro Blog? Puedes enviar tus sugerencias haciendo clic aquí.
¡Hasta el próximo artículo! :)