¿Qué es Browsersync?

¿Te interesa aprender HTML y quieres convertirte en un desarrollador web? Existen múltiples herramientas que te pueden ayudar a instruirte por este mundo del desarrollo web. En esta ocasión te explicaremos qué es Browsersync, sus funciones clave y cómo esta herramienta te puede ayudar a agilizar tu trabajo con HTML.

¿Qué es?

Browsersync es una poderosa herramienta que te permite probar tu sitio web en tiempo real, es un servidor local para desarrollar. Se usa para revisar los archivos HTML y CSS en el directorio y realiza la actualización o recarga directamente en la página en todos los navegadores cada vez que los archivos reciben algún cambio o edición. Browser Sync acelera el flujo de trabajo al sincronizar las URL, las interacciones y los cambios de código en varios dispositivos.

Esta herramienta, creada por Google y lanzada en 2007, sirve como un par de manos extra. Puede personalizar una serie de configuraciones de sincronización desde la interfaz de usuario o la línea de comandos para crear un entorno de prueba personalizado.

BrowserSync te permite manejar diferentes navegadores simultaneamente por medio de el uso de sockets, de esta manera cuando desarrolles, podrás ver inmediatamente los cambios en distintas ventanas. Esto resulta muy importante ya que actualmente los navegadores no implementan de la misma forma los estándares presentes en los lenguajes de programación.

Por ejemplo, si estas usando Internet Explorer, posiblemente no tengas soporte para ciertas reglas de CSS3 o características de ES6, lo cual ralentizaría tu proceso, Browsersync evita esas perdidas de tiempo.

Funciones Clave de Browsersync

• Puedes desplazarte en un navegador e igualmente otros navegadores siguen el scroll hasta el mismo punto en el que te detengas.
• Al hacer click en enlaces, desde los otros navegadores se cargan las URLS en la que hiciste click.
• Puedes rellenar y enviar formularios ya que desde los otros navegadores también se envían.
• Tienes la opción de probar diseños receptivos, lograrás ver tu sitio renderizado en diferentes dispositivos a la vez.
• Puedes cambiar o ajustar HTML, CSS y JS, agrega automáticamente esos archivos nuevos sin la necesidad de actualizar la página.
• Browsersync tiene compatibilidad con muchos ejecutores de tareas como GULP y Grunt, así como si optimización logrando su funcionamiento en muchos sistemas operativos.

En conclusión Browsrsync es una herramienta que te ayudara a agilizar tu tiempo de trabajo y el de tu equipo, sirviendo como servidor que interconecta diferentes navegadores, sin necesidad de hot-reloading y replicando los clicks y scroll en todos los navegadores que estén conectados para que se comporten como uno solo.

¿Cómo empezar a usar Browsersync?

Para incorporar browsersync en tus proyectos es necesario que sigas los pasos que te vamos a dar a continuación:

1. Instalar Node.js

Browsersync es un módulo de Node.js, una plataforma que ha sido diseñada para crear aplicaciones de red de forma exprés. Previo a comenzar con todo, debes tener instalado Node.js en tu sistema. Puedes descargar los instaladores oficiales desde aquí: Instalar Node.js en MacOS, Windows o Linux.

2. Instalar Browsersync

Una vez que tengas Node.js, puedes usar su administrador de paquetes (npm) para instalar Browsersync. Abre una terminal y ejecuta el siguiente comando:

npm install -g browser-sync

Este comando descarga e instala Browsersync de manera global en tu sistema, lo que significa que estará disponible para todos tus proyectos.

3. Iniciar Browsersync

Después de instalar Browsersync, puedes comenzar a usarlo para monitorear tus archivos y sincronizar los cambios con el navegador. Puedes hacerlo según tu tipo de proyecto, así:

Tipo de Proyecto	Comando de Browsersync
Sitios estáticos	Usa el modo servidor si trabajas con archivos HTML. Esto iniciará un servidor local:
	browser-sync start --server --files "css/*.css"
Sitios dinámicos	Si ya tienes un servidor local (como PHP), utiliza el modo proxy con este comando:
	browser-sync start --proxy "mi-proyecto.local" --files "css/*.css"

Nota: En el caso de los sitios estáticos, Browsersync generará un pequeño servidor que te proporcionará una URL para previsualizar tu sitio. Para los sitios dinámicos, se creará una URL de proxy que envuelve tu servidor existente y facilita el trabajo en equipo y las pruebas.

Ahora que sabes qué es Browsersync, ¿quieres seguir adquiriendo conocimientos en el área? Con nuestro Bootcamp en Desarrollo Web podrás dominar esta y otras herramientas y tecnologías como JavaScript, React, Microservicios y hasta despliegue de servidores en menos de 7 meses. ¡Apúntate ahora!