Independientemende de si eres un desarrollador front-end, back-end ó full-stack, si no quieres perder tiempo realizando tareas comunes de forma manual, es momento de que aprendas a usar un automatizador como Gulp.js.

Qué es Gulp

Gulp es una herramienta que permite automatizar las tareas más comunes que tenemos que hacer durante el desarrollo de la aplicación, como la recarga del navegador, la minificación de hojas de estilo, validación de sintaxis javascript, etc…

Está construído con Javascript, funciona sobre Node.js y es Open Source, así que su código fuente lo puedes encontrar en Github.

Instalación

Para poder utilizar Gulp, es necesario tener instalado NodeJS. Si aún no lo tienes, aquí tienes una explicación sobre cómo instalarlo en Linux, Windows o OSX.

Al ser una herramienta construida para que trabaje con NodeJS, para instalar Gulp ejecutamos el siguiente comando:

$ > sudo npm install -g gulp

Lo hacemos con el flag -g o --global para que se instale de forma global en el sistema y así podamos ejecutarlo desde cualquer directorio y utilizarlo en cualquier otro proyecto.

Una vez hecho, puedes probar que todo está bien instalado ejecutando el siguiente comando:

$ > gulp -v

, y te devolverá algo parecido a:

CLI version 3.8.10
Local version 3.8.10

Cómo utilizarlo

Vamos a ver uno ejemplo muy sencillo. Crearemos la típica aplicación "Hola mundo" que automáticamente recarga el navegador cada vez que se produce un cambio en los ficheros HTML, CSS de la misma.

1. Crear el proyecto

Lo primero que hacemos es crear una carpeta donde vamos a albergar esta prueba:

$ > sudo mkdir ./gulp-primeros-pasos

Nos movemos a la carpeta que acabamos de crear y creamos el archivo package.json, que contendrá la descripción de nuestra aplicación, dependencias del proyecto, versión del mismo, etc…

$ > cd gulp-primeros-pasos

$ > npm init

El comando nos irá solicitando información sobre el proyecto. Finalmente tendremos algo parecido a esto:

{
  "name": "gulp-primeros-pasos",
  "version": "1.0.0",
  "description": "Primeros pasos con Gulp",
  "main": "index.html",
  "author": "Koldo Hernández",
  "license": "MIT"
}

2. Instalar plugins

Estando situados en el directorio raíz de nuestro ejemplo, gulp-primeros-pasos, instalamos los plugins de Gulp que vamos a necesitar

  • Librería para poder utilizar gulp

    $ > npm install --save-dev gulp 
    
  • Plugin para correr el servidor web en modo LiveReload

    $ > npm install --save-dev gulp-connect
    
  • Fallback para poder utilizar el API History de HTML5

    $ > npm install --save-dev connect-history-api-fallback 
    

Una vez ejecutadas, veremos que ha cambiado el fichero package.json, todo esto gracias a los flag --save y -dev. Concretamente, se habrá añadido a la clave devDependencies las dependencias (librerías) que acabamos de añadir y las versiones de las mismas.

{
  "name": "gulp-primeros-pasos",
  "version": "1.0.0",
  "description": "Primeros pasos con Gulp",
  "main": "index.html",
  "author": "Koldo Hernández",
  "license": "MIT",
  "devDependencies": {
    "connect-history-api-fallback": "0.0.5",
    "gulp": "^3.8.10",
    "gulp-connect": "^2.2.0"
  }
}

Además, en el esqueleto de nuestro proyecto se habrá añadido la carpeta node_modules donde tendremos las librerías que vamos a utilizar.

3. Crear la aplicación de ejemplo

Por tanto nuestra aplicación de ejemplo tendrá sólo 2 ficheros:

/app/
    index.html
    /css/main.css

El contenido del fichero /app/index.html es el siguiente:

<!doctype html> 
<html lang="es"> 
<head>
  <meta charset="UTF-8"> 

  <link rel="stylesheet" href="/css/main.css"> 

  <title>Ejemplo</title>
</head> 

<body>
  Hola Mundo! 
</body>

</html>

, y el de la hoja de estilos /app/css/main.css es:

body {
  background: white;
  color: #000;
}

4. Gulpfile.js

Ahora debemos crear el archivo gulpfile.js, que es el fichero que Gulp.js necesita para saber que tareas realizará.

$ > sudo vi ./gulpfile.js

Lo primero que hacemos es añadir a este fichero las librerías (plugins) que vamos a utilizar. En nuestro caso:

var gulp = require('gulp'), 
    connect = require('gulp-connect'), 
    historyApiFallback = require('connect-history-api-fallback');

A continuación iremos creando las tareas que queremos automatizar. A continuación se explica cada una de ellas.

4.1. Servidor web de desarrollo y live reload

Añadimos al fichero gulpfile.js la siguiente tarea:

// 1. Servidor web de desarrollo 
gulp.task('server', function() {
    connect.server({ 
        root: './app', 
        hostname: '0.0.0.0', 
        port: 8082, 
        livereload: true, 
        middleware: function(connect, opt) {
            return [ historyApiFallback ];
        } 
    })
});

Esta tarea toma el contenido del directorio app y lo devuelve en la url http://0.0.0.0:8082 o http://localhost:8082 o http://127.0.0.1:8082.

Al indicar el hostname 0.0.0.0 conseguimos que el livereload, que es lo que permite ver los cambios que hacemos en tiempo real, sea visible desde cualquier dispositivo conectado a la misma red.

Por lo tanto, si nuestro equipo tiene la IP privada 192.168.1.37 y accedemos desde cualquier dispositivo (movil, tableta o ordenado) a la url http://192.168.1.37:8082 veremos en tiempo real los cambios hechos en la aplicación.

Lo primero que vamos a hacer es crearnos una servidor de desarrollo donde probar el ejemplo:

4.2. Inspector de cambios producidos en el código fuente

Para que el LiveReload tenga efecto, debemos configurar las tareas que se encargan de revisar si se han producido cambios tanto en los ficheros HTML como en las hojas de estilos Stylus.

Para ello, seguimos los siguientes pasos:

a. Creamos la tarea que recarga el navegador cuando hay cambios en las hojas de estilos

    gulp.task('css', function() {
        gulp.src('./app/css/**/*.css') 
            .pipe(connect.reload());
    });

b. Creamos la tarea que recarga el navegador cuando hay cambios en el HTML

    gulp.task('html', function() {
        gulp.src('./app/**/*.html') 
            .pipe(connect.reload());
    });

c. Creamos el inspector (listener) que está atento a los cambios producidos en el código fuente y lanza las tareas relacionadas

    gulp.task('watch', function() {
        gulp.watch(['./app/**/*.html'], ['html']);
        gulp.watch(['./app/css/**/*.css'], ['css']); 
    });

d. Creamos la tarea por defecto que lanza las tareas server y watch

    gulp.task('default', 
        ['server', 'watch']
    );

5. Probar el ejemplo

Para probar el ejemplo, lo primero que tendremos que hacer es ejecuntar el siguiente comando:

$ > gulp

Con el, lo que hacemos es lanzar las tareas que tenemos automatizadas. De esta forma, si accedemos a la URL de nuestro ejemplo, tal y como hemos comentado en el punto 4.1, tendremos que ver algo como esto:

Primeros pasos con Gulp: hello world blanco

Si modificamos los estilos de la hoja de estilos main.css cambiando el blanco por azul, cuando guardamos el archivo y sin necesidad de recargar la página, automáticamente se refrescan los cambios en nuestro navegador.

Primeros pasos con Gulp: hello world blanco

Lo mismo ocurriría si modificamos la estructura y contenido del index.html


Recursos

Un punto fuerte de Gulp es que existe una gran comunidad y gran cantidad de plugins para cualquier cosa que se nos ocurra.

Si deseas profundizar un poco más en esta herramienta, puedes consultar la documentación oficial del proyecto en la siguiente url: https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md#getting-started

Si estás dando tus primeros pasos, te recomiendo que leas este tutorial básico y primeros pasos con Gulp.js.