Una introducción a Gulp para el desarrollador frontend. Parte 2

En la primera parte de este artículo vimos como crear tareas en Gulp. En esta segunda parte aprenderemos a vigilar archivos para ejecutar tareas y a crear un servidor virtual.

Vigilando archivos

Una de las funciones nativas de gulp mas interecante es gulp.watch que nos permite vigilar archivos y directorios y cuando detecta cambios en ellos podemos indicarle que ejecute una tarea. Veamos como sería.

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

Ahora si ejecutamos la tarea watch gulp se quedará vigilando el directorio html y todos sus subdirectorios, cuando detecte algún cambio en alguno de los archivos automáticamente ejecutará la tarea html.

Con esto no tenemos que preocuparnos de estar ejecutando una tarea cada vez que realizamos un cambio mientras trabajamos.

Podemos utilizar la tarea watch que hemos creado para que vigile también la carpeta js.

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

Ahora también vigila la carpeta js y según que archivos modifiquemos ejecutará una tarea u otra.

Servidor local

Una buena practica es simular un servidor local en tu directorio dist que actualice el navegador cada vez se ejecuta uan tarea, así no tenemos que estar recargando cuando realizamos cambios y podemos ir mucho mas rápido.

Para crear un servidor usaremos el plugins de gulp-connect lo instalamos igual que siempre con npm i -D gulp-connect.

Una vez instalado creeamos una nueva tarea.

gulp.task('connect', function() {
    connect.server({
        root: 'dist',
        port: 8080,
        livereload: true
    });
});

Con esto es suficiente para tener un servidor. Explicamos un poco los parámetros. El parámetro root sirve para indicarle cual sera la carpeta principal de nuestro servidor en nuestro caso queremos que sea la carpeta dist que es donde estará el código final.

El parámetro port lo usamos para indicarle en que puerto queremos que se ejecute el servidor, lo normal es utilizar el puerto 80 que es el puerto por defecto, pero yo suelo utilizar el puerto 8080 porque tengo otros servidores com Apache instalados que usan el puerto 80 y así no hay conflictos.

Por último livereload es el que hace la magia de autorecargar el sitio cada vez que guardamos una tarea. Aunque necesitamos un paso extra que enseguida veremos.

Antes de continuar puedes comprobar que todo funciona correctamente accediendo a la url http://localhost:8080. Donde 8080 puede ser cualquier puerto que hayas definido en el parametro port.

Si ves el contenido de nuestra página index.html es que todo esta correcto.

Antes dijimos que nos faltaba un pequeño paso para que nuestro navegador se auto recargara al ejecutar una tarea y es añadir la sentencia .pipe(connect.reload()); al final de cada tarea que queremos que recargue el navegador al ejecutarse. En nuestro caso lo queremos en las tares html y js.

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

gulp.task('js',function() {
    gulp.src('src/js/**/*.js')
        .pipe(concat('app.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'))
        .pipe(connect.reload());
});

Creando tareas productivas

Para que todo esto funcione correctamente necesitamos que trabajen juntas así podemos definir una tarea llamada work para usarla mientras desarrollamos y que nos permita tener ambas tareas ejecutándose a la vez.

gulp.task('work', ['watch', 'connect']);

Ahora nos basta con ejecutar la tarea gulp.work y cada vez que guardemos un archivo se ejecutará su tarea correspondiente y nuestro navegador se actualizará automáticamente en todos los dispositivos.

Por último dejo el pequeño gulpfile.js que hemos desarrollado en estos dos artículos.

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var connect = require('gulp-connect');

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

gulp.task('js',function() {
    gulp.src('src/js/**/*.js')
        .pipe(concat('app.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'))
        .pipe(connect.reload());
});

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

gulp.task('connect', function() {
    connect.server({
        root: 'dist',
        port: 8080,
        livereload: true
    });
});

gulp.task('default', ['html', 'js']);

gulp.task('work', ['watch', 'connect']);

Una buena tarea pendiente es añadir el plugin run-sequence para que la tarea gulp-work nos ejecute primero todas las tareas para ponerlas al día antes de conectar el servidor.

Esto es solo la punta del iceberg de lo que puede hacer Gulp ahora te toca a ti investigar sobre plugins y como mejorar este ecosistema de tareas. Escribiremos más acerca de Gulp en AGM Studio.