Servir y sincronizar los últimos cambios con Gulp y BrowserSync

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.

Gulp and BrowserSync
Gulp and BrowserSync

¡Saludos!

Deja tu comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.