Qué es Gulp y cómo funciona

En el desarrollo web es habitual recurrir a diferentes herramientas y scripts para facilitar muchas de las tareas que se realizan en la creación de un sitio o aplicación web. Gulp es una de esas herramientas muy útiles que muchos programadores web siempre utilizan para acelerar y mejorar su trabajo.

A continuación, hablaremos de Gulp, qué es, para qué sirve, y cómo puedes utilizarlo paso a paso.

Qué es Gulp y para qué sirve

Gulp es una herramienta que sirve para automatizar muchas de las tareas habituales que se realizan durante el 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 NodeJS que se utiliza en el desarrollo web para ejecutar todo tipo de tareas, siendo las más habituales:

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

Gulp cuenta con más de 3000 plugins que permiten la ejecución de toda clase de tareas relacionadas con la programación web. Esta gran cantidad de complementos la convierten en una herramienta ideal para acelerar el proceso de creación de aplicaciones y sitios web, facilitando de forma notable el trabajo de los desarrolladores.

Cómo usar Gulp paso a paso

Veamos cómo usar Gulp paso a paso: 

1. Instalar Gulp

El primer paso para poder utilizar Gulp es su instalación, lo que requiere también de una instalación de Node en el sistema.

• Instalación de Node. Es una instalación sencilla y guiada que se puede realizar en apenas unos minutos. Basta con ir al portal de Node, bajar la última versión y ejecutar el instalador.
• Instalación de Gulp. Para instalar Gulp es necesario haber instalado antes Node. Su instalación global requiere abrir la consola o terminal e introducir el siguiente comando: npm install –global gulp.cli.

2. Lanzar Gulp

El siguiente paso tras la instalación de Node y Gulp es inicializar la herramienta. Se debe crear el archivo package.json, o bien manualmente en un editor de texto, o utilizando el comando npm init que lo creará después de realizar algunas preguntas (nombre del paquete, descripción del proyecto, nombre de usuario…). Esta segunda opción automatizada es la recomendada por su rapidez y facilidad.

Una vez creado el archivo package.json es necesario ejecutar npm install –save-dev gulp para instalar Gulp en el nuevo proyecto.

Para comprobar que Gulp está correctamente instalado y configurado, basta con abrir con un editor de texto el archivo package.json y verificar que Gulp ahora aparece como una dependencia:

“devDependencies”: {  “gulp”: “^4.0.2” }

3. Añadir plugins de Gulp

El funcionamiento de Gulp se basa en la instalación de una serie de plugins que se encargan de realizar distintas funciones. Veamos cómo se instala un complemento para que pueda ser utilizado cuando sea necesario.

Para instalar un plugin en Gulp hay que utilizar el siguiente comando: npm install nombre del plugin. Por ejemplo, para instalar el plugin CSSnano (optimización de código CSS) se tendrá que introducir: npm install gulp-cssnano.

Se pueden instalar varios plugin desde una misma línea de comando como, por ejemplo:

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

Este comando instalará en Gulp los complementos Sass (compilar código SASS y generar código CSS), PostCSS (transformar código CSS mediante JavaScript), Autoprefixer (generar prefijos vendor al código CSS) y el Sourcemaps (para indicar líneas de código y archivos).

Tras la instalación de un plugin, se añade una línea con su dependencia al archivo packages.json, por lo que se puede comprobar si la instalación se ha realizado con éxito comprobado este archivo.

4. Configurar Gulp

El último paso necesario para utilizar Gulp es realizar una configuración de la herramienta. Este proceso requiere de la creación manual del fichero gulpfile.js, para lo cual se puede utilizar el bloc de notas o cualquier editor de texto de Linux.

En este archivo será necesario añadir las siguientes líneas referentes a los plugins que se han instalado, como, por ejemplo:

const gulp = require(‘gulp’);

const sass = require(‘gulp-sass’);

const cssnano = require(‘gulp-cssnano’);

Ahora es necesario añadir la configuración de cada plugin siguiendo las indicaciones que proporciona cada uno de ellos.

Gulp es una herramienta enfocada a facilitar y acelerar muchas de las tareas que realizan los desarrolladores web durante su trabajo. La gran cantidad de plugins existentes hacen que Gulp se convierta en una necesidad una vez se utiliza, pues no se podrán realizar todo tipo de funciones de forma automatizadas, sin necesidad de estar codificándolas desde cero, lo que consigue ahorrar tiempo, esfuerzo, y si se trata de un proyecto comercial, dinero.