Browsersync: Sincroniza y agiliza el desarrollo web

Al momento de desarrollar un proyecto web, una de las tareas mas tediosas son las constantes pruebas en diferentes dispositivos, ya no son solo navegadores, ahora también debemos incluir móviles, tablets, televisores... todo un desastre.

Existen varias soluciones para agilizar este proceso, pero Browsersync se postula a mi parece como la más eficiente y sencilla de configurar.

Browsersync nos permite probar nuestro proyecto en múltiples navegadores sin tener que refrescar cada uno de ellos, solo deberás preocuparte de escribir el código, guardar y bang!, los cambios se reflejarán al instante en todos los dispositivos como si de magia negra se tratara.

No obstante con esto, también trae un panel (por defecto en localhost:3001) donde puedes sincronizar eventos y ver el historial de navegación entre otras opciones.

El código de este ejemplo estará disponible en este repositorio de github.

Instalando Browsersync y las dependencias

Browsersync es increíblemente fácil de configurar en Gulp. Lo primero es crear un nuevo proyecto npm:

 npm init

Luego vienen las dependencias de desarrollo:

npm i --save-dev gulp gulp-sass browser-sync

En windows es probable que Browsersync arroje errores, pero solo son algunas dependencias opcionales que no son indispensables para que funcione.

Agregamos un par de archivos

app/index.html

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <title>Browsersync example</title>
        <link rel="stylesheet" href="css/main.css">
    </head>

    <body>
        Browsersync example
        <script src="js/main.js"></script> 
    </body>
</html>

app/css/main.sass

html, body
    -webkit-font-smoothing: antialiased
    -moz-osx-font-smoothing: grayscale
    font-family: sans-serif
    background-color: #F9F9F9

app/js/main.js

console.log('is working');

Por último, el gulpfile

var gulp    = require('gulp');
var sass    = require('gulp-sass');
var bs      = require('browser-sync').create('server');


gulp.task('sass', function () {
    return gulp.src('./css/main.sass')
        .pipe(sass({outputStyle: 'compressed'}))
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./css/'))
        .pipe(bs.stream());
});

gulp.task('server', function() {
    bs.init({
        server: {
            baseDir: "./"
        }
    });

    gulp.watch("./css/main.sass", ['sass']);
    gulp.watch("./js/main.js").on('change', bs.reload);
    gulp.watch("./index.html").on("change", bs.reload);
});

gulp.task('default', ['sass', 'server']);

En la tarea sass agregamos la función bs.stream(), esta función inyectara el nuevo archivo css sin refrescar el navegador.

En server le decimos que sirva el root y en las ultimas lineas escuchamos los cambios en los archivos que invocarán la función bs.reload, esta última será la encargada se orquestar las actualizaciones de los navegadores.

Probando todo

Para poner nuestro proyecto en marcha debemos escribir en consola:

gulp defaut

Si todo está bien configurado tu consola arrojará algo como esto:

Automáticamente se abrirá un navegador donde podrás ver tu proyecto, todos los cambios que hagas en main.sass, index.html y main.js dispararán la actualización del navegador y podrás ver en tiempo real los cambios realizados.

Ya tienes la herramienta, ahora ve y optimiza esos tiempos de trabajo :)