Qué es Gulp y cómo funciona

Gulp es un gestor de tareas (task runner) de código abierto que se ejecuta sobre Node.js y sirve para automatizar las tareas repetitivas del desarrollo web: optimizar imágenes, compilar CSS, comprobar enlaces, refrescar el navegador al guardar cambios o desplegar archivos en el servidor. Gracias a sus miles de plugins, permite a los desarrolladores trabajar más rápido y evitar procesos manuales.

Qué es Gulp y para qué sirve

Gulp es una herramienta que sirve para automatizar muchas de las tareas habituales del desarrollo de una aplicación web, desde copiar y mover archivos hasta actualizar el navegador de forma automática cuando se modifica el código. Se trata de un task manager (gestor de tareas) en forma de script de Node.js que se utiliza para ejecutar todo tipo de tareas. Las más habituales son:

• Optimizar las imágenes de la web.
• Generar código CSS.
• Procesar el código HTML para verificar que los enlaces que incluye son correctos.
• Empaquetar una web para poder ejecutar el script en el servidor (JavaScript, CSS, HTML…).
• Desplegar una página en el servidor web.
• Realizar transferencias por FTP y SSH.

Gulp cuenta con más de 3000 plugins que permiten ejecutar toda clase de tareas relacionadas con la programación web. Esta gran cantidad de complementos la convierte en una herramienta muy práctica para acelerar la creación de aplicaciones y sitios web, y facilita de forma notable el trabajo de los desarrolladores. Su enfoque, conocido como «código sobre configuración», consiste en encadenar tareas mediante código JavaScript, lo que aporta mucha flexibilidad a la hora de definir el flujo de trabajo.

A diferencia de otros gestores como Grunt, Gulp trabaja con flujos (streams) de Node.js: procesa los archivos en memoria y los pasa de una tarea a otra sin necesidad de crear archivos temporales intermedios, lo que agiliza el proceso. Además, incluye la función de vigilancia (watch), capaz de detectar cambios en los archivos y ejecutar las tareas correspondientes de forma automática.

Cómo usar Gulp paso a paso

Para empezar a trabajar con Gulp basta con seguir cuatro pasos: instalarlo, inicializar el proyecto, añadir los plugins necesarios y configurar el archivo de tareas.

1. Instalar Gulp

El primer paso es la instalación, que requiere tener Node.js en el sistema:

• Instalación de Node.js. Es un proceso sencillo y guiado que se completa en unos minutos. Basta con acceder al portal de Node.js, descargar la última versión y ejecutar el instalador. Node incluye npm, el gestor de paquetes que se usará después.
• Instalación de Gulp. Una vez instalado Node, se abre la consola o terminal y se instala la interfaz de línea de comandos de Gulp de forma global con el comando npm install --global gulp-cli.

2. Lanzar Gulp

El siguiente paso es inicializar la herramienta dentro del proyecto. Para ello hay que crear el archivo package.json, bien manualmente con un editor de texto, bien con el comando npm init, que lo genera tras hacer algunas preguntas (nombre del paquete, descripción del proyecto, autor…). Esta segunda opción es la recomendada por su rapidez.

Una vez creado el archivo package.json, se ejecuta npm install --save-dev gulp para instalar Gulp en el proyecto. Para comprobar que se ha instalado correctamente, se abre package.json con un editor de texto y se verifica que Gulp aparece como dependencia de desarrollo:

"devDependencies": { "gulp": "^4.0.2" }

3. Añadir plugins de Gulp

El funcionamiento de Gulp se basa en la instalación de plugins que se encargan de realizar distintas funciones. Para instalar un plugin se utiliza el comando npm install nombre-del-plugin. Por ejemplo, para instalar CSSnano (optimización de código CSS) se introduce npm install gulp-cssnano.

También se pueden instalar varios plugins en una misma línea de comandos, por ejemplo:

npm install --save-dev gulp-sass gulp-postcss autoprefixer gulp-sourcemaps

Este comando instala los complementos Sass (compila código SASS y genera CSS), PostCSS (transforma el CSS mediante JavaScript), Autoprefixer (añade los prefijos de proveedor al CSS) y Sourcemaps (para relacionar el código generado con los archivos y las líneas originales). Tras instalar un plugin, se añade una línea con su dependencia al archivo package.json, de modo que se puede comprobar ahí si la instalación se ha realizado con éxito.

4. Configurar Gulp

El último paso es configurar la herramienta. Para ello se crea manualmente el fichero gulpfile.js, con el bloc de notas o cualquier editor de texto. En este archivo se añaden, en primer lugar, las líneas que importan los plugins instalados, por ejemplo:

const gulp = require('gulp');
const sass = require('gulp-sass');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const sourcemaps = require('gulp-sourcemaps');

A continuación se define la configuración de cada plugin y las tareas que se quieren automatizar, siguiendo las indicaciones que proporciona cada complemento. A partir de ese momento, basta con ejecutar las tareas desde la terminal para que Gulp realice el trabajo de forma automática y, si se configura, vuelva a lanzarlas cada vez que se detecta un cambio en los archivos.

Gulp y el despliegue en tu hosting

Una de las tareas que Gulp puede automatizar es el despliegue de los archivos en el servidor mediante FTP o SSH. Para que ese proceso funcione con fluidez conviene apoyarse en un servicio de hosting que ofrezca buen rendimiento y acceso para subir los archivos del proyecto. HostingPlus, en funcionamiento desde 2004, incluye discos NVMe y tecnología LiteSpeed para acelerar la carga de las páginas, además de certificado SSL y migración incluidos, soporte 24/7 en español y autogestión desde el panel sin necesidad de llamadas de teléfono. Los planes y sus precios en euros pueden consultarse en la página de hosting.

Preguntas frecuentes

¿Para qué sirve Gulp?

Sirve para automatizar tareas repetitivas del desarrollo web, como optimizar imágenes, compilar CSS, comprobar enlaces, refrescar el navegador o desplegar archivos en el servidor. De este modo, el desarrollador ahorra tiempo y evita repetir procesos manuales.

¿Qué necesito para usar Gulp?

Necesitas tener Node.js instalado, ya que Gulp se ejecuta sobre él y utiliza npm para instalar tanto la herramienta como sus plugins. Después se crea un archivo package.json y un gulpfile.js donde se definen las tareas.

¿Qué es un plugin de Gulp?

Es un complemento que añade una función concreta a Gulp, como compilar SASS, optimizar CSS o añadir prefijos de proveedor. Gulp dispone de miles de plugins, lo que permite construir un flujo de trabajo a medida de cada proyecto. Antes de instalarlos conviene revisar que el plugin esté actualizado y sea compatible con la versión de Gulp utilizada.