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!