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.
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.
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.
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
¡Saludos!