¿Qué es Gulp y para que sirve?

Gulp es una herramienta, en forma de script en NodeJS, que te ayuda a automatizar tareas comunes en el desarrollo de una aplicación, como pueden ser: mover archivos de una carpeta a otra, eliminarlos, minificar código, sincronizar el navegador cuando modificas tu código, validar sintáxis y un largo etcétera. En este post te quiero contar cómo empezar a utilizarlo con unos sencillos ejemplos.

Lo primero que debes hacer es instalar gulp tanto a nivel global como a nivel de proyecto. Para instalarlo a nivel global utiliza npm de la siguiente manera:

npm install -g gulp

Esto te permitirá ejecutar gulp desde la linea de comandos para cualquier proyecto que esté usando la herramienta. Por otro lado, es necesario instalar gulp a nivel de proyecto. En este ejemplo vas a crear un proyecto desde cero, por lo que primero necesitas ejecutar npm init para generar el archivo package.json

npm init

Una vez hecho esto, instala gulp a nivel de proyecto:

npm install --save-dev gulp

Toda las tareas que comentaba al principio del post deben estar ubicadas en un archivo llamado gulpfile.js en la raíz del proyecto. En él deberás importar el modulo gulp que te permitirá generar tareas con el siguiente formato:

var gulp = require('gulp');
gulp.task('default', function () {
});

Como ves, una tarea se instancia a través de gulp.task, un nombre y la función que se ejecutará cuando dicha tarea se invoque. La tarea default, como su propio nombre indica, será la que se ejecute por defecto si no se especifica el nombre de ninguna tarea. Sin más código que este, accede lanza el comando gulp desde la consola.

Gulp default
Gulp default

La tarea default se ha iniciado y ha finalizado con éxito, lo cual demuestra que tu configuración funciona y ya podemos empezar a ver algunos ejemplos de tareas con gulp. En un principio puede parecerte que es un trabajo muy manual pero lo cierto es que, una vez que has configurado en gulp tus tareas del día a día, te facilita mucho el trabajo. Además, existe un buscador de plugins alrededor de gulp que van a hacerte tu vida mucho más fácil.

Lo primero que te quiero enseñar es cómo montar un servidor web para tu desarrollo. Para ello vamos a utilizar el plugin gulp-live-server:

npm install --save-dev gulp-live-server

Crea una nueva tarea llamada serve:

var gulp = require('gulp'),
    gls = require('gulp-live-server');
gulp.task('serve', function () {
    var server = gls.static('public', 9000);
    server.start();
});
gulp.task('default', function () {
});

En esta tarea, estamos utilizando el nuevo módulo para crear el servidor que estará escuchando por el puerto 9000 y sirviendo el contenido de la carpeta public.

Gulp serve
Gulp serve

Ahora vamos a hacer que esa carpeta exista y tenga algo de contenido que servir. Para ello, crea inicialmente una carpeta llamada src donde estará el código fuente de tu aplicación con un index.html básico para este ejemplo:

<!DOCTYPE html>
<head>
    <title>Testing Gulp</title>
</head>
<body>
<h1>Hello Gulp!</h1>
</body>
</html>

Para copiar los archivos a la carpeta public necesitarás una tarea que mueva los archivos que elijas de tu carpeta src al destino.

gulp.task('publish', function () {
    gulp.src('src/*.html')
        .pipe(gulp.dest('public'));
});

Para este trabajo utilizamos gulp.src donde le decimos cuál es el origen y qué tipos de archivo tiene que buscar. Acto seguido llamamos a pipe que nos permitirá manejar el resultado de la acción anterior y a través de gulp.dest cuál es el destino de los archivos, en este caso a public. Si ejecutas dicha tarea verás que de manera automática generará la carpeta public y copiará el archivo index.html en ella.

Ahora bien, ¿tengo que ir lanzando tarea por tarea en el orden que necesito? En este ejemplo, primero debería publicar para después servir el contenido copiado ¿correcto? Lo cierto es que es posible concatenar las tareas para que sea mucho más sencillo su uso. Para ello, voy a hacer uso de la tarea default, la cual será responsable de invocar al resto en el orden correcto.

var gulp = require('gulp'),
    gls = require('gulp-live-server');
gulp.task('serve', function () {
    var server = gls.static('public', 9000);
    server.start();
});
gulp.task('publish', function () {
    gulp.src('src/*.html')
        .pipe(gulp.dest('public'));
});
gulp.task('default', ['publish', 'serve'], function () {
});

Como puedes ver, solamente tienes que incluir en la tarea default, entre el nombre y la función, un array con las tareas que quieres que se lancen antes de que se invoque esta.

Gulp - Concatenando tareas
Gulp – Concatenando tareas

Siguiendo estos pasos puedes añadir todas las tareas que necesites y que unas dependan de otras si fuera necesario.

Desde Visual Studio Code es posible lanzar todas ellas a través de Control + P > task. Aparecerá un listado con todas las que hayas incluido en tu gulpfile.js

Visual Studio Code - task - gulp
Visual Studio Code – task – gulp

¡Saludos!