Gulp, automatizando procesos

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)

Requerimientos

Lo único necesario es tener Node.js: https://nodejs.org/en/download/

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.

Al fin todo listo!

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:

  1. 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á.
  2. 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’)`
  3. 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

Saludos!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *