Uno de las tareas mas tediosas para un programador es tener que volver a cargar el navegador cada vez que realiza algún cambio en los archivos de un proyecto, a pesar de que utilizo workflows avanzados con sass y otras herramientas notablemente productivas, en ocasiones se nos impone el no utilizar estas herramientas ni sus archivos en producción.
Normalmente soy muy maníatico con mi flujo de trabajo y aunque pueda parecer que recargar el navegador no nos lleva tanto tiempo, al cabo del día es más de lo que pensamos, a eso debemos sumarle el estrés que provoca esta tarea en algunos momentos, sobre todo si estás acostumbrado a que el navegador se recargue solo.
BrowserSync es una herramienta de automatización que garantiza un proceso de desarrollo web rápido y relajado. Lo hace mediante la sincronización de los cambios de archivos y las interacciones en múltiples dispositivos, una herramienta que me ha ayudado a reducir el tiempo que tengo que dedicar a automatizar la sincronización en diferentes navegadores y dispositivos ya que recarga automáticamente el navegador cuando se modifica cualquier tipo de archivo creando un servidor HTTP simple que ejecuta nuestro proyesto en el host local con un puerto en particular.
La característica más importante de BrowserSync es el Live Reloading, todos los cambios en el código hacen que se recargue la página automaticamente en los navegadores y dispositivos conectados, vamos a ver como utilizar Browser-Sync con y sin Gulp.
Lo primero que tenemos que hacer es instalar el package en Node.js, si no tienes instalado Node.js instalado, puedes descargarlo desde su página oficial
Una vez comprobado que tenemos Node.js, ejecutamos el comando que instalará BrowserSync.
npm install -g browser-sync
Con esto tenemos instalado Browser-Sync en Node y ya podemos utilizarlo, para comprobar que realmente está instalado podemos ejecutar en la terminal un comando que nos devolverá la versión instalada:
browser-sync --version
Lo bueno de Browser-Sync es que aunque pueda ser utilizado con Gulp, no depende de este por lo que lo podemos utilizar en cualquier proyecto y elegir que tipo de archivos queremos que sean revisados, veamos un par de ejemplos:
Revisar los archivos .css de un directorio en particular
browser-sync start --server "localhost/miproyecto" --files "css/*.css"
El comando anterior pondrá en marcha Browser-Sync y revisará todos los archivos .css de nuestra carpeta css, es un comando muy funcional pero me gusta más que se revisen todos los archivos en los que realizo algún cambio, ya sean .css, .js o .php por lo que habitualmente utilizo este otro:
browser-sync start --proxy "localhost/miproyecto" --files "**/*"
Usar Browser-Sync con Gulp
Si ya tienes Gulp en tu proyecto o bien tienes la necesidad de instalarlo para automatizar tareas, puedes usar Gulp para lanzar Browser-Sync, lo primero es instalar Gulp y Browser-Sync en la carpeta raíz de tu proyecto:
npm install browser-sync gulp
Se creará una carpeta node_modules, una vez instalados crearemos un archivo gulpfile.js en el que escribiremos el siguiente código:
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
gulp.task('browser-sync', function() {
browserSync.init({
proxy: "localhost/miproyecto"
});
});
Este código funciona bien en una instalación con Xampp y Worpress, pero según cada caso podemos necesitar modificarlo, para más información puedes recurrir a la documentación de Browser-Sync en su página oficial.
Valoraciones
Sé el primero en valorar