"El diseño es el embajador silencioso de tu marca"
- Paul Brand

Aprende a usar BrowserSync

Si quieres agilizar tus desarrollos aprende a usar BrowserSync, aunque obviamente existen otras alternativas y puede que no sea lo más conveniente en todos los casos, en muchos de tus desarrollos (a mi entender en la mayoría) este paquete va a aportar bastante a tus proyectos.

¿Para qué sirve?

BrowserSync nos permite controlar varios navegadores al mismo tiempo mediante el uso de sockets, de esta manera cuando desarrollamos podremos ver inmediatamente los cambios en distintas ventanas.

Esto es muy importante porque actualmente los navegadores no implementan de la misma forma los estandares de los lenguajes de programación.

Por poner un ejemplo si estas usando Internet Explorer posiblemente no tengas soporte para ciertas reglas de CSS3 o características de ES6.

Browsersync te ayuda al permitirte ver como renderizan tu aplicación distintos navegadores.

Dentro de las ventajas que ofrece destacan:

  • Nos permite hacer hot-reloading
  • Escucha automáticamente los cambios en nuestros ficheros mediante automatizadores de tareas
  • Replica los clicks y el scroll en todos los navegadores conectados para que se comporten como uno solo.

Instalación

Como cualquier otro paquete de node se puede instalar facilmente usando npm, en su página web nos recomiendan instalarlo de global así

npm install -g browser-sync

Una vez instalado lo vamos a comenzar a usar en un proyecto sencillo, para ello por ejemplo me creo una carpeta con el nombre test_bs con la última versión de la famosa plantilla HTML5 Boilerplate.

Como esta plantilla viene practicamente vacia (solo pone «Hello world! This is HTML5 Boilerplate.«), voy a añadirle bootstrap 4 y algo de contenido para que podais ver como funciona.

Como esta tarea es bastante intrascendente, y si estas siguiendo el tutorial lo que quieres es probar rápido como funciona BrowserSync, voy a subir todo esto a github para que te lo descargues de forma rápida, aquí tienes el link

Si te descargas esto y abres directamente el fichero index.html puedes ver una página de prueba con algunos componentes de bootstrap4 como el interface, un carousel, una modal, etc…

Esto te lo pongo para que puedes interactuar mínimamente con la página…

Ahora te posicionas en el directorio con la consola y escribes este comando, que es el que recomiendan usar los desarrolladores cuando se trata de una página estática…

browser-sync start --server --files "css/*.css"

Con esto BrowserSync levanta un servidor en el puerto 3000, que podremos atacar con cualquier navegador y que además conectará las distintas ventanas para que las acciones que ejecutemos en un sitio se propague al resto.

El resultado es este.

 

Como se puede observar tengo abiertas dos ventanas, las dos apuntando al puerto 3000 que me acaba de abrir BrowserSync, una de ellas es un Firefox y la otra un Chrome.

Yo interactuo con la ventana de Firefox pero mis acciones son replicadas en la otra ventana. Este es tan solo un ejemplo de lo que podemos hacer, podriamos tener al mismo tiempo corriendo tambien un Explorer, un Chromium, etc…

De esta manera de un solo vistazo podemos ver como renderizan nuestra web los distintos navegadores a los que queramos darle soporte y detectar posibles fallos o variaciones.

The following two tabs change content below.
Especialista en diseño web responsive, programador html5, css3, jquery, php y java.

Latest posts by Óscar Lijó (see all)