El ABC con Gulp, un hola mundo

¡Hola de nuevo! Hace tiempo que no escribo, pero ya estoy por aquí de nuevo. He seguido avanzando con mis tareas y vengo a traer con este post otra joya de la informática. Imagino que muchos especialistas del frontend ya lo conocerán, se trata de Gulp. Pero si no lo conoces, esta es una de estas herramientas de las que hay que conocer, de las mustknow.

Gulp es una herramienta JavaScript que ejecutamos mientras que desarrollamos en local. Nos automatiza muchas tareas de forma que podemos hacer cosas automáticamente como optimizar imágenes, optimizar ficheros CSS minimizándolos, combinándolos. Podemos automatizar también el tratamiento de los ficheros JavaScript, combinándolos, comprimiéndolos, etc.. De igual manera incluso podemos automatizar despliegues, montar un servidor local para probar mientras desarrollamos. También podemos refrescar el navegador automáticamente cuando cambiamos algo en algún fichero, o retrabajar los ficheros con cada cambio, monitorizando los cambios, y un largo, muy largo, etcétera.

Resumiendo, este post es un hola mundo para empezar a trabajar con Gulp.

Requerimientos, Nodejs

Lo primero es que necesitamos es Nodejs como runtime enviroment. Me remito a un post anterior sobre cómo instalarlo por si no lo tenemos ya: https://jnjsite.com/javascript-hola-mundo-con-node-js/

Si vamos a línea de comandos podemos poner:

node -v

..y si todo ha ido bien se tiene que ver algo cómo la imagen siguiente:

Requerimientos, NPM

NPM es el gestor de paquetes por defecto para Nodejs, con lo que ya lo tendremos instalado después de haber instalado Nodejs. Lo siguiente será instalar Gulp más los paquetes que queramos usar con Gulp.

Instalando Gulp

Para instalarlo globalmente podemos hacer:

npm install -g gulp-cli

Si estamos en GNU/Linux tendremos que hacer:

sudo npm install -g gulp-cli

Preparando un fichero package.json

Ahora tendremos que crear el fichero inicial package.json para empezar a instalar todos los paquetes. Para esto hacemos:

npm init

..para generar este primer package.json tendremos que seguir muchas preguntas para configurarlo. Podemos darle enter a todas las preguntas ya que luego podremos configurar manualmente el fichero package.json. Un package.json hecho así quedaría y podemos editarlo en cualquier momento:

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Entonces para instalarlo localmente en el proyecto Gulp podemos hacer:

npm install --save-dev gulp

Ya a partir de ahora podemos instalar todo lo que queramos de esta forma en el package.json y se generará también un package-lock.json. Igual que con el composer.json y composer.lock quedarán definidas los paquetes y versiones JavaScript de cada cosa que vayamos usando.

Preparando un primer fichero gulpfile.js

Lo siguiente será intalar todas las librerías o paquetes que queramos usar con Gulp mientras que vamos generando el fichero Gulpfile.js que nos ayudará a trabajar en el día a día. Si por ejemplo quisiéramos simplemente minizar un fichero JavaScript, como por ejemplo el Service Worker de JnjSite.com, podríamos hacer tal que así:

'use strict'

const gulp = require('gulp')
const { parallel } = require('gulp')
const minify = require('gulp-minify')

function jsServiceWorker() {
    return gulp.src('./sw.js')
        .pipe(minify({
            ext: {
                //src: '.src.js', 
                min: '.min.js'
            },
            noSource: true
        }))
        .pipe(gulp.dest('.'))
}

function watchServiceWorkerTask() {
    gulp.watch('./sw.js', parallel('jsServiceWorker'))
}

exports.default = watchServiceWorkerTask
exports.jsServiceWorker = jsServiceWorker
exports.watch = watchServiceWorkerTask

Este código fuente con Gulp sirve para minificar sólo el fichero ./sw.js y ponerlo minificado en el fichero ./sw.min.js. Si lanzamos Gulp desde línea de comandos con el comando Watch, se quedará esperando en búsqueda de cambios para lanzar la minificación. Podemos lanzar la minificación desde línea de comandos haciendo así:

gulp jsServiceWorker

Para poner a gulp esperando cambios en el fichero ./sw.js podemos lanzarlo así:

gulp watch

Si lo tenemos ejecutando en una ventana aparte, y vamos editando el fichero ./sw.js veremos algo como lo siguiente. En donde se puede ver cómo se va lanzando la minificación del fichero sin tener nosotros que ir a hacerlo manualmente.

Estos ficheros sirven para tenerlos lanzados mientras que estemos en cada proyecto, con su fichero gulpfile.js personalizado. La idea es ir añadiendo de esta forma, tantas tareas como queramos en paralelo en un mismo fichero gulpfile.js en cada proyecto, que nos ahorrarán mucho tiempo.. para minificar todo, optimizar los ficheros, desplegar en producción, etc.

Qué otras cosas podemos hacer con Gulp y terminando

Para terminar con este post sólo me queda invitarte a probar otros paquetes de NPM para Gulp como los siguientes:

• Gulp-sass para compilar los ficheros SASS en ficheros normales CSS.
• Gulp-cssnano para minificar los ficheros CSS.
• Gulp-concat para concatenar varios ficheros en uno.
• Gulp-imagemin junto con imagemin-mozjpeg e imagemin-pngquant para optimizar imágenes.
• Vinyl-ftp para subir automáticamente ficheros a un FTP.
• Etcétera..

Hay muchos más plugins, a fecha de hoy rezan 4107 en la página oficial de Gulp:
https://gulpjs.com/plugins

Para terminar sólo me queda remitirte a las páginas oficiales de NPM y de NodeJS también por si quieres seguir avanzando con el tema:
https://www.npmjs.com/
https://nodejs.org/es/

Otro día más.. ¡Un saludo!