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
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 poniendogulpse 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