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.
[plain]npm install –save-dev browser-sync[/plain]
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.
[javascript highlight=»4-11,22″]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 () {
});[/javascript]
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!