Browser Sync: instalación y configuración

Browser Sync

Se trata de un plugin disponible para Grunt, mediante el cual podremos testear nuestra aplicación de manera simultánea, en múltiples dispositivos y navegadores.

Con él resolvemos la tediosa tarea de testear manualmente nuestra aplicación, navegador por navegador, y dispositivo por dispositivo. Ahora podremos hacerlo en paralelo, propagando eventos (click, touch, scroll, etc) a través de todos los dispositivos y navegadores que tengamos conectados, de tal modo que iremos viendo cómo se comporta la aplicación, a la vez con todos ellos.

¿Cómo instalarlo?

Simplemente debemos añadirlo al package.json del proyecto:

package.json

{
  ...

  "dependencies": {
    ...
  },
  "devDependencies": {
    ...
    "grunt-browser-sync": "~0.6.0",
    ...
  },

  ...
}

Configurar browser_sync en Grunt

Suponiendo que cada uno de los plugins lo configuras en un archivo .js diferente, haciendo uso de load-grunt-config, el archivo correspondiente a grunt-browser-sync, sería browser_sync.js:

browser_sync.js

module.exports = {
    dev: {
        files: {
            src : ['<%= myapp.rutadev %>/css/commons.css']
        },
        options: {
            watchTask: true
        } 
    },
    pro: {
        files: {
            src : ['<%= myapp.rutapro %>/css/commons.min.css']
        }
    }
}

En este ejemplo, le estamos indicando dos configuraciones diferentes: 'dev' y 'pro':

• Para 'dev', le pedimos que se quede observando los cambios producidos en commons.css, y actualice la página si se detectan. También vemos la opción watchTask: true. Hay que ponerlo si ya tenemos nuestra propia tarea watch corriendo por otro lado.
• En el caso de 'pro', sin embargo, no hemos añadido watchTask: true, ya que no ejecutaremos 'watch' con dicha tarea.

Todo depende de cómo tengamos nuestra configuración. Es importante por tanto, añadir watchTask: true, si vas a lanzar 'watch' también. Por ejemplo, si fuesemos a lanzar la tarea 'server_dev':

grunt.registerTask('server_dev', [
    'connect:livereload',
    'browser_sync:dev',
    'watch'
]);

Añadir scripts a nuestros HTML

Cuando lancemos la tarea, por consola nos aparecerá la lista de scripts que debemos inyectar en nuestros HTML, para que todos los dispositivos se sincronicen. Algo como esto:

Una vez añadidos los scripts, abrimos la web con dos navegadores diferentes, y comprobamos que se propaguen los eventos de uno a otro. Ahora si hacemos un cambio en commons.css, se verá el efecto en todos a la vez.

¡Feliz testeo!