Automatizar procesos con Gulp

Si lo que buscás es ahorrar tiempo en tareas repetitivas y aún no conocés Gulp, este artículo te va a interesar.

En pocas palabras, Gulp es una herramienta para automatizar tareas en etapa de desarrollo. Algunos ejemplos son:

Minificar Javascript, CSS
Concatenar archivos en un sólo
Optimizar imágenes
Lanzar un servidor con recarga automática
Interactuar con repositorios (Git)

Tabla de Contenidos

¿Cómo empezar?
Configurar funcionalidades en Gulp
Incorporemos unos conceptos más con un ejemplo

Luego de instalarlo, podemos avanzar con la instalación de Gulp CLI con el comando:

npm install --global gulp-cli

¿Cómo empezar?

Con todo instalado, nos dirigimos en una terminal al directorio de nuestro proyecto e inicializamos el archivo package.json, aquí se irán almacenando automáticamente nuestras dependencias y configuraciones, para esto ejecutamos:

npm init

La terminal nos comenzará a pedir alguna info de nuestro proyecto, completamos según corresponda o podemos simplemente darle enter a todo.

Seguimos con unos comandos más (falta poco, lo prometo), ahora instalamos Gulp en el proyecto

npm install gulp --save-dev

Y ahora creamos un archivo llamado gulpfile.js, por el momento quedará vacío.

Configurar funcionalidades en Gulp

En este punto tenemos el terreno preparado para empezar a automatizar, tiro algunos conceptos y después les dejo algunos ejemplos. Go!

Dependiendo de lo que querramos hacer, vamos a tener que seguir instalando dependencias. Para saber que instalar deberemos buscar los paquetes correspondientes, podemos hacerlo en https://www.npmjs.com/ o en cualquier buscador con un criterio como por ejemplo “optimizar imágenes + glup“

Una vez que lo encontramos lo agregamos al proyecto con la sintaxis:

npm i -D [nombre-paquete]

Incorporemos unos conceptos más con un ejemplo

Vamos a unir todos los archivos .js en 1 solo, a ese archivo lo minificaremos, lo renombraremos para agregarle el subfijo .min y por último guardaremos el resultado en una carpeta llamada dist.

Empecemos por lo que ya sabemos, instalemos las dependencias necesarias, en nuestro caso:

npm i -D gulp-concat; # para concatenar archivos
npm i -D gulp-uglify; # para minificar javascript
npm i -D gulp-rename; # para renombrar

Ahora tenemos que abrir el archivo gulpfile.js y colocar unas lineas, dejo comentario en el código para que sepan que hace cada parte:

// Incluyo dependencias que instalamos
// Las almaceno en variables para utilizar luego
var gulp = require('gulp');
var concatJs = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
// Declaro funciones con el método `task` del objeto gulp
// El primer parámetro corresponde al nombre de la función (para llamarla luego)
// El segundo parámetro es la función o rutina que se ejecutará al llamarla
gulp.task('minify-js', function() {
  // `src` para indicar adonde debe buscar los archivos
  return gulp.src(['js/*.js']) 
    // Concateno
    .pipe(concatJs('scripts.min.js')) 
    // Minifico
    .pipe(uglify())
    // Almaceno
    .pipe(gulp.dest('dist/js'));
});

Lo que hay que rescatar y explicar de este ejemplo es el comando pipe(), el cual sirve para ir concatenando acciones: toma una entrada, procesa y genera una salida, y si volvemos a llamar al método, el proceso se repite.

Guardamos y listo. Ejecutamos en consola __gulp [nombre_funcion]__ y se llevará a cabo todo lo que hayamos hecho.

gulp minify-js

Agrego 3 conceptos extra que son muy útiles:

Si al nombre de la función le ponemos default, al llamarlo por consola no es necesario especificarle el nombre, simplemente poniendo gulp se ejecutará.
Podemos ejecutar varias acciones en simultáneo, para eso deberemos usar el método gulp.parallel(‘nombre_funcion_1’, ‘nombre_funcion_2’, ‘nombre_funcion_n’)
Podemos invocar una función y dejarla a la espera, cada vez que se guarde un archivo que la afecte, automáticamente ejecutará sus acciones.

Para ejemplificar esto les linkeo un repositorio que armé con un ejemplo: https://gitlab.com/cemansilla/gulp-example