Gulp: Qué es y cómo se utiliza

En este tutorial aprenderás todo lo que necesitas saber acerca de Gulp, de modo que puedas comenzar a utilizarlo con tus proyectos. A diferencia de muchos otros tutoriales que puedas encontrar acerca de Gulp, no nos iremos por las ramas, por lo que no agregaremos capas de complejidad a aquello que de por sí no es complejo.

Antes de comenzar con este artículo, es importante que tengas una serie de consideraciones en cuenta. Partiremos de que jamás has usado Gulp y de que tampoco sabes cómo instalarlo, por lo que seguiremos absolutamente todos los pasos desde el principio. Veremos cómo instalar Gulp tanto en Windows como en Linux y Mac. Sin embargo, necesitas ciertos conocimientos básicos acerca de ciertos temas.

Estos son los requisitos de este tutorial:

• Es importante que tengas ciertos conocimientos básicos acerca de la línea de comandos del sistema operativos que utilizas. Si no los tienes, consulta este tutorial acerca de la línea de comandos, en donde se explica cómo usarla tanto en Linux como en Windows o Mac. Si usas Windows, también puedes instalar Git Bash para usar la línea de comandos de Linux, que es algo más que recomendable. También puedes activar la terminal de Linux para Windows.
• Por último, también deberías tener ciertos conocimientos básicos acerca de HTML, CSS y JavaScript.

Una vez termines este tutorial, habrás aprendido a instalar y a utilizar Gulp, además de saber compilar archivos Sass en un solo archivo CSS, minificándolos automáticamente.

Acerca de Gulp

Gulp es un task runner o gestor de tareas que permite automatizar tareas redundantes. Sin embargo, la automatización de cualquier tarea siempre conlleva una configuración inicial, que es lo que veremos en este tutorial. Existen más aplicaciones de este tipo, como por ejemplo Grunt, que antes de la existencia de Gulp era la más utilizada.

Con Gulp podrás automatizar el compilado de scripts o de de código CSS de distintos frameworks, pudiendo también minificar el código para obtener un solo archivo comprimido como resultado, que es el que usarás en producción.

La instalación y configuración de Gulp requiere Node.js, que es un entorno de ejecución JavaScript que se usa del lado del servidor. También usaremos npm, que es el gestor de paquetes de Node.js más utilizado, mediante el cual podrás crear entornos de desarrollo local e instalar plugins de Gulp con tan solo un comando.

Instalación de Gulp

Gulp requiere que tengas tanto Node.js como npm instalado en el sistema. Para comprobar si estas herramientas están instaladas, abre una ventana de terminal y ejecuta los comandos node -v y npm -v, que deberían mostrar las versiones instaladas de ambas aplicaciones.

Instalación de Node

Si no tienes Instalado Node.js y el gestor de paquetes npm en tu sistema, consulta el tutorial de instalación de Node.js y npm en Windows, Linux y Mac. No es necesario que sigas los pasos para inicializar un proyecto, puesto que es algo que también trataremos en este tutorial.

Si no estás para más tutoriales, aquí tienes la versión rápida:

• Instalación de Node en Windows: Basta con que te descargues el instalador de Node desde aquí, ejecutes el instalador y sigas los pasos que se muestran en pantalla.
• Instalación de Node en Mac: Si usas un Mac, primero necesitarás instalar homebrew, así que abre la terminal de comandos de macOS y ejecuta este comando:

  /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

  Luego instala node ejecutando el comando brew install node.

• Instalación de Node en Linux: Si usas Linux, todo dependerá de la distribución que tengas instalada. Su usas Ubuntu, Linux Mint o Fedora, basta con que ejecutes el comando sudo apt install nodejs. Si usas CentOS/RHEL, primero descárgate las dev tolls de C++ mediante el comando yum install -y gcc-c++ make. Luego debes descargarte Node mediante el siguiente comando:

  curl -sL https://rpm.nodesource.com/setup_12.x | sudo -E bash -

  Y finalmente instala Node ejecutando el comando yum install nodejs.

Tras asegurarte de que Node está instalado, ya puedes instalar Gulp.

Instalación de Gulp

Lo primero que vamos a hacer es usar npm para instalar la herramienta de línea de comandos de Gulp, que instalaremos de forma global en el sistema.

Por si no sabes la diferencia entre instalar paquetes de Node localmente o globalmente, vamos a ver las diferencias:

• Instalación global de paquetes: Cuando instalas un paquete globalmente, se instala para todo el sistema, pudiendo usar la única instancia del paquete o herramienta instalada desde cualquier proyecto.
• Instalación local de paquetes: Cuando instalas un paquete localmente, se instalará individualmente en el proyecto en el que estés trabajando, pudiendo haber de esta forma varias instancia de la misma herramienta o paquete en tu sistema. Eso sí, cuando instalas un paquete de forma local no podrás usarlo fuera del ámbito del proyecto en el que está instalado.

Lo que vamos a hacer con Gulp es instalarlo de forma global. Para ello, basta con que ejecutes este comando:

npm install --global gulp-cli

Y esto es todo. Gulp estará ya instalado en tu sistema. Los pasos que has seguido hasta ahora no es necesario que los repitas en tus sistema cuando quieras usar Gulp con otro proyecto. Lo que sí harás es configurarlo localmente, tal y como veremos a continuación.

Cómo utilizar Gulp

Ahora vamos a crear un proyecto, así que dirígete al directorio en el que sueles crear tus proyectos y crea un directorio para el mismo. Yo suelo crearlos en el directorio /code, así que crearé el directorio /code/tutorial-gulp para el proyecto de demostración que vamos a crear.

Accedo al directorio de proyectos:

cd /code

Creo el directorio tutorial-gulp:

mkdir tutorial-gulp

Ahora me situaré en el directorio recién creado:

cd tutorial-gulp

Seguidamente, vamos a iniciar Gulp.

Inicialización de Gulp

Ahora vamos a configurar Node con el proyecto mediante el comando npm init, que creará el archivo package.json. También puedes crear el archivo manualmente, pero es mejor que uses el siguiente comando:

npm init

Este comando te guiará en la creación del archivo package.json haciéndote una serie de preguntas, como el nombre del paquete, la descripción del proyecto o tu nombre. Introduce los valores que prefieras. En mi caso, este ha sido el archivo package.json resultante:

{
  "name": "tutorial-gulp",
  "version": "1.0.0",
  "description": "Tutorial de introduccion a Gulp",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Edu Lazaro",
  "license": "MIT"
}

Seguidamente, ejecuta el siguiente comando para instalar Gulp:

npm install --save-dev gulp

Seguramente se muestren una serie de advertencias acerca de paquetes obsoletos. No les hagas caso. Finalmente se mostrará un mensaje de confirmación indicando que la instalación ha finalizado.

Luego observa los contenidos del directorio del proyecto. Verás que hay un directorio nuevo llamado node_modules, que es el directorio que Node usa para instalar los paquetes del proyecto. No le hagas mucho caso, ya que la idea es que sea npm quien gestione este directorio y no el desarrollador.

Por ahora, con Node y Gulp ya configurados, la única dependencia del proyecto es la de Gulp. Podrás saber cuáles son si abres el archivo package.json de nuevo, en donde podrás comprobar que ahora Gulp aparece como una dependencia:

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

Instala Plugins de Gulp

Gulp dispone de una enorme cantidad de Plugins. En este ejemplo nos limitaremos a utilizar cuatro de ellos, que son los que más se utilizan cuando configuras un proyecto con Sass. Estos son los paquetes que usaremos:

• Sass: Paquete que se usa para compilar código SCSS o SASS y generar código CSS.
• Cssnano: Se usa para minificar y optimizar el código CSS resultante.
• PostCSS: Sirve para transformar el código CSS mediante plugins JavaScript. Para más información, consulta el tutorial de PostCSS.
• Autoprefixer: Se usa para agregar los prefijos vendor al código CSS resultante, estableciendo reglas particulares para cada navegador.
• Sourcemaps: Los sourcemaps se generan a partir de tu código, indicando de qué archivo y en qué línea del código original se encuentra una porción del código minificado.

Si has leído en qué consisten estos plugins, podrás deducir que cuando configures Sass, no te tendrás que preocupar ni de minificar el código manualmente ni de agregar los prefijos necesarios de cada navegador. Si nunca has usado Sass, debes saber que se ha convertido en poco menos que un estándar, así que ya sea ahora o cuando finalice este tutorial, te recomiendo que consultes el tutorial de introducción a Sass.

Para instalar todos estos plugins basta con que uses el siguiente comando:

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

Si cuando termine la instalación de los paquetes compruebas el archivo packages.json podrás ver que ahora tiene la siguientes dependencias:

"devDependencies": {
  "gulp": "^4.0.2",
  "autoprefixer": "^9.8.2",
  "gulp-postcss": "^8.0.0"
  "gulp-cssnano": "^2.1.3",
  "gulp-sass": "^4.1.0",
  "gulp-sourcemaps": "^2.6.5"
  }

A modo de referencia, si hubieses especificado los paquetes a instalar en el archivo package.json y luego hubieses ejecutado el comando npm install, se hubiesen instalado todos los plugins sin tener que especificarlos en la terminal de comandos.

Además, si accedes al directorio node_modules, verás muchos más paquetes de los que hemos instalado. Esto es debido a que estos otros paquetes son dependencias de los paquetes que hemos instalado.

Configuración de Gulp

Ahora vamos a configurar Gulp, para lo cual debes crear un archivo llamado gulpfile.js en la carpeta raíz de tu proyecto. Es en este archivo en donde definiremos las tareas de Gulp junto a todos los procesos asociados. Crea el archivo gulpfile.js y edita el archivo con cualquier IDE o editor de texto.

Lo primero que vamos a hacer es importar los plugins que hemos instalado:

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

Lo ideal es que todos tus archivo estén en un directorio aparte. Es muy habitual llamarle a este directorio /src y situar en él todos los archivos SCSS y JavaScript sin compilar. En cuanto a los archivos resultantes, que son los que usarás con tu proyecto, también es recomendable que estén en su propio directorio, siendo el directorio /dist uno de los más habituales, aunque puedes escoger cualquier otro, como por ejemplo /public.

Dicho esto, vamos a crear la primera tarea de Gulp indicando el directorio de origen de los archivos .scss y también el directorio resultante, que es en donde se crearán los archivos .css resultantes:

gulp.task('workflow', function() {
  gulp
    .src('./src/sass/**/*.scss')
    .pipe(gulp.dest('./dist/css/'))
})

Tal y como ves hemos usado una serie de asteriscos en la ruta de los archivos .scss mediante la expresión ./src/sass/**/*.scss. Los asteriscos son caracteres comodín que se usan para hacer referencia a todos los directorios que haya en el interior del directorio relativo ./src/sass/. Del mismo modo, también hemos usado asteriscos en el nombre del archivo, indicando que haremos referencia a todos los archivos con extensión .scss.

Finalmente hemos indicando  el directorio relativo ./dist/css/ como directorio de destino.

Ahora vamos a insertar la configuración del resto de plugins. Cada plugin tiene su propia documentación, por lo que las líneas que verás a continuación no son algo que demos pro hecho que sepas, aunque tras usarlas varias veces no tendrás ningún problema en recordarlas. Además, el uso de la mayor parte de los plugins de Gulp es muy sencillo.

gulp.task('tareas', function() {
  gulp.src('./src/sass/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(postcss([ autoprefixer({
        Browserlst: [
            "> 1%",
            "ie >= 8",
            "edge >= 15",
            "ie_mob >= 10",
            "ff >= 45",
            "chrome >= 45",
            "safari >= 7",
            "opera >= 23",
            "ios >= 7",
            "android >= 4",
            "bb >= 10"
        ],
        cascade: false,
    }) ]))
    .pipe(cssnano())
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./dist/css/'));
});

Hemos inicializado el plugin Sourcemaps y también hemos configurado el plugins de Sass para que muestre un log con los posibles errores. También hemos establecido que el código CSS sea compatible con los navegadores indicados y que se minifique el código, creado sourcemaps en el mismo directorio en el que se creen los archivos CSS; es decir, el directorio /dist/css/.

A continuación vamos a definir un watch, que vigilará los archivos esperando que haya cambios en ellos. Cuando se produzcan cambios en algún archivo de los especificados, se iniciará la tarea indicada. Esta tarea será nuestra tarea 'default', que es la que se ejecutará por defecto. Así que vamos a establecer que esta tarea sea la que se usa por defecto:

gulp.task('default', function() {
  gulp.watch('./src/sass/**/*.scss', gulp.series('tareas'));
});

El directorio que hemos definido es aquel del que Gulp estará pendiente. Además, hemos establecido que se vigilen cambios solamente en los archivos .scss.

Este es nuestro archivo resultante:

'use strict';

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

gulp.task('tareas', function() {
  gulp.src('./src/sass/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(postcss([ autoprefixer({
      Browserlst: [
        "> 1%",
        "ie >= 8",
        "edge >= 15",
        "ie_mob >= 10",
        "ff >= 45",
        "chrome >= 45",
        "safari >= 7",
        "opera >= 23",
        "ios >= 7",
        "android >= 4",
        "bb >= 10"
      ],
      cascade: false,
    }) ]))
    .pipe(cssnano())
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./dist/css/'));
});

gulp.task('default', function() {
  gulp.watch('./src/sass/**/*.scss', gulp.series('tareas'));
});

Probando la configuración

Vamos a crear un sencillo proyecto en el que incluiremos varios archivos .scss. A un archivo le llamaremos main.scss, y será en el que importemos los otros dos archivos. Los otros dos se llamarán _varaibles.scss y _general.scss.

Crea los archivos de prueba

Crea primero el archivo _variables.scss en el directorio /src/sass de tu proyecto y agrega el siguiente código en su interior:

$font-color: #2d2d2d;
$font-weight: normal;
$font-size: 1rem;
$line-height: 1.6;
$font-family: Arial, sans-serif;

Luego crea el archivo _general.scss, también en el directorio /src/sass de tu proyecto y agrega el siguiente código en su interior:

html {
  font: $font-weight #{$font-size}/#{$line-height} $font-family;
}

.row {
  display: table;
  text-align: center;
  margin: 0 auto;
}

.col {
  display: table-cell;
}

Es importante que te hayas asegurado de que el nombre de estos dos archivos comienza por guión bajo _, ya que es así como se definen los módulos de Sass.

Ahora crea finalmente el archivo main.scss en el mismo directorio. En este caso el archivo va sin guión bajo. Debes importar los otros dos archivos en su interior:

@import "variables";

@import "general";

Esto será suficiente para probar Gulp.

Compila los archivos con Gulp

Una vez creados los archivos, sitúate en el directorio de tu proyecto mediante la línea de comandos y usa el siguiente comando para ejecutar Gulp, que ejecutará el comando por defecto y agregará el watch que hemos definido:

gulp

Podrás ver un log por pantalla cada vez que modifiques un archivo:

[16:52:26] Starting 'default'...
[16:52:28] Starting 'tareas'...

Si ahora accedes el directorio /dist, deberías poder ver el directorio /css con los archivos main.css y main.css.map en su interior.

Si abres el archivo main.css, podrás ver que contiene el código fruto de la unión de nuestros archivos .scss, minificado y listo para ser usado:

html{font:normal 1rem/1.6 Arial,sans-serif}.row{display:table;text-align:center;margin:0 auto}.col{display:table-cell}

Gulp con JavaScript

Solamente hemos arañado la superficie de lo que puedes hacer con Gulp. Es habitual usarlo también con JavaScript, de modo que puedas usar las últimas novedades de la especificación ECMAScript, traspilando el código automáticamente a una versión de JavaScript que sea compatible con la mayoría de los navegadores. También es muy habitual usarlo para transpilar código TypeScript a código JavaScript.

Puedes encontrar el código completo del proyecto en GitHub.

Ahora que tienes todas las dependencias globales necesarias para trabajar con Gulp, podrás usarlo mucho más rápido con cualquier proyecto, ya que ahora será suficiente con que lo inicialices. Para saber más cosas acerca de Gulp puedes consultar su documentación.

---