Automatiza tu Workflow con Browser-Sync

16 de /marzo03 de /2019
3m 56s
gulp
0 comentarios
3658

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

Quizás te interese ...

Utilizamos cookies para mejorar tu experiencia

Utilizamos cookies propias y de terceros para personalizar el contenido, analizar nuestros servicios, ofrecer funciones de redes sociales, analizar el tráfico y mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación.

Permitir todas las cookies Configurar Política de cookies