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

* Tu valoración puede tardar hasta 72 horas en publicarse.

He leido y acepto el Aviso legal y condiciones de uso

Utilizamos cookies propias y de terceros para personalizar el contenido y los anuncios, ofrecer funciones de medios sociales y analizar el tráfico. Además compartimos información sobre el uso que haces de nuestra web con nuestros partners de medios sociales, de publicidad y de análisis web. Si continúas navegando estás dando tu consentimiento para la aceptación de nuestra Política de cookies.

ACEPTAR
Aviso de cookies