Después de contarte qué es Gulp y cómo puede ayudarte en tu día a día, seguro que te has quedado con ganas de saber qué más puede hacer por ti. En este post quiero contarte cómo utilizar Gulp para servir y sincronizar en el navegador los últimos cambios de manera automática. Para ello, nos vamos a apoyar en el módulo BrowserSync.

npm install --save-dev browser-sync

La configuración es muy similar a la que viste en el post anterior. He utilizado la misma carpeta public desde la que se servirá el contenido.

var gulp = require('gulp'),
    browserSync = require('browser-sync').create();
gulp.task('browser-sync', function () {
    browserSync.init({
        server: {
            baseDir: 'public'
        }
    });
});
gulp.task('publish', function () {
    gulp.src(['src/*.html', 'src/**/*.js'])
        .pipe(gulp.dest('public'));
});
gulp.task('watch', function () {
    gulp.watch(['src/*.html', 'src/**/*.js'], ['publish', browserSync.reload]);
});
gulp.task('default', ['watch', 'publish', 'browser-sync'], function () {
});

Para aprovechar una de las funcionalidades más importantes de BrowserSync he utilizado gulp.watch para detectar los cambios que ocurran en los archivos HTML y JavaScript, con el fin de que vuelvan a publicarse en la carpeta public, a través de la tarea publish, y que el navegador se actualice de forma automática utilizando browserSync.reload.

¡Saludos!