Browsersync con Gulp

Ivan Martil

Hace una semana vimos una guía inicial de gulp. Hasta el momento somos capaces de compilar sass pero no estaría de mas crear una tarea para actualizar el navegador de manera automática y olvidarnos del F5.

Basicamente he encontrado dos maneras de realizarlo. Uno es livereload, un método que ya había utilizado como extensión de chrome y funciona sin problemas. Pero ya que estoy indagando nuevos entornos probaremos con Browsersync. Este último va un poco más allá. Refresca y detecta cambios en multiples navegadores, sincroniza los ‘clicks’ y el scroll, incluso dispone de su propia interfaz gráfica para el debug en remoto. Es un programa independiente a gulp, pero se integra con facilidad y dispone de una api muy bien documentada.

Sencillo de instalar y configurar, dos minutos y listos. Pues no. Windows da algún que otro quebradero de cabeza. Mi error fue iniciar la instalación sin leer la recomendación que hacen en su web para los usuarios de windows. Pero ni siguiendo las instrucciones funciona. No hay nada mejor que “googlear” un poco para encontrar gente que se ha enfrentado a lo mismo que tú (si, siempre alguien ha llegado antes que tú). Y como no me gusta apropiarme de cosas ajenas os dejo el link a la mejor guía que encontré para la instalación en windows. En mi caso no me hizo falta realizar todos los pasos descritos en la web. Los mios fueron:

Instalar Python 2.7
Sí, la versión que parece funcionar sin problemas en windows es la 2.7 (en el momento de publicación de este artículo)
Añadir Python como variable de entorno
(equipo/propiedades/configuración avanzada del equipo/variables de entorno) Una vez allí entramos en path dentro de variables de sistema y añadimos la ruta del ejecutable de Python (c:\Python27)
Instalar visual studio 2013
Es muy posible que con la versión 2015 tampoco haya problemas
Instalar browsersync
Desde el terminal: npm install --msvs_version=2013 browser-sync --save-dev

Si estamos configurando gulp en Mac la cosa se simplifica bastante. Simplemente lo instalamos como cualquier otro plugin de gulp.

npm install browser-sync --save-dev

Bien, ya tenemos BrowserSync instalado. En el artículo anterior teníamos dos tareas creadas. ‘sass‘ que compila el css y ‘watch‘ que vigila los cambios y ejecuta ‘sass‘ cuando los detecta.
Ahora hay que adaptarlas para trabajar con BrowserSync.

Como siempre en gulp debemos crear la dependencia.
var browserSync = require('browser-sync').create();
Siguiendo la documentación podemos configurar nuestra tarea con el servidor local (Xaamp, Mamp..). Veamos el código siguiente:


//dependencias

var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();

//tareas

var input="./src/scss/*.scss";
var output="./dist/css";
var urlProject='http://localhost/migulp/src/';

gulp.task('sass', function(){
  return gulp
  .src(input)
  .pipe(sass().on('error', sass.logError))
  .pipe(gulp.dest(output))
  .pipe(browserSync.stream());
});

//opcion proxy cuando ya tenemos un localhost

gulp.task('server', function() {
  browserSync.init({
     proxy: urlProject
  });
  gulp.watch(input, ['sass']);
  gulp.watch("src/*.html")
      .on('change', browserSync.reload);
});

gulp.task('default', ['server']); 

Si comparamos el código con el anterior hemos eliminado la tarea ‘watch‘ para incluirla dentro de ‘server‘ donde hacemos la llamada a nuestro servidor.

En esta ocasión creo una variable urlProject con la ruta de mi proyecto para luego llamarla al iniciar browserSync. De este modo empleando ‘proxy‘ podemos hacer uso del servidor local y trabajar con wordpress o drupal. Dentro de la tarea ‘server‘ incluimos un watch a la tarea ‘sass‘ y un watch a cualquier archivo con extensión html dentro de la carpeta del proyecto (en este caso solo index.html). Al incluir

.on('change', browserSync.reload); 

Logramos que gulp refresque el navegador cada vez que detecte cambios en nuestros archivos html. Con este método podríamos observar cualquier tipo de archivo en busca de cambios para actualizar el navegador.

Si observamos la tarea Sass hemos introducido un cambio importante respecto al código anterior.

 .pipe(browserSync.stream()); 

Justo después de informar a gulp donde queremos nuestro código css hacemos una llamada a browserSync empleando el método .stream.
Con ello logramos refrescar el archivo css cada vez que detecte cambios. No recarga la página, sino que inyecta los cambios del código css en el navegador sin necesidad de refrescar la página. Mucho más rápido.

Para ejecutar todas las tareas creamos una nueva con el nombre ‘default‘ y le asignamos las tareas que queremos ejecutar. De este modo escribiendo en el terminal: gulp ejecutamos  todas las tareas incluidas en default.

Imagen 1

Si ahora hacemos una llamada a gulp desde el terminal aparece en pantalla algo similar a la imagen 1. Siempre que estemos trabajando en Osx. En windows las url’s no aparecen. Los campos Local, External… aparecen, pero sin contenido.

El inconveniente con esto es tener la ip dinámica. Al no mostrar la url para acceder de forma externa tenemos que andar con el (ip-config) para encontrar la url. Por suerte tanto en mac como en windows browserSync usa el puerto 3001 por defecto para el acceso a su UI. Simplemente con la url localhost:3001 accederemos a la interfaz gráfica del programa.

En caso de querer cambiar el puerto tan solo debemos pasar el parámetro en la tarea.


browserSync.init({
proxy:urlProject,
port:8080
})

Una vez dentro de la interfaz veremos las url’s que nos interesan (ver imagen 2). Tanto interna como externa, así como múltiples opciones de configuración.

No pretendo explicar aquí todas las opciones de configuración. Es tarea de cada uno indagar y aprender con que especificaciones se siente más cómodo.

El Remote Debug es prácticamente la única opción que utilizo con frecuencia. Por algún motivo, no siempre me funciona a la primera. Se arregla activando y desactivando un par de veces el Remote Degugger pero aún no logro saber el porqué. Es una herramienta fantástica. Muy útil para inspeccionar elementos en el móvil o cualquier otro dispositivo.

Imagen 2

 

Evidentemente no es Ghostlab. Probé este ultimo durante el periodo gratuito y es mucho más completo y preciso, pero son 49$ por una licencia. Si quieres dos versiones, una windows y otra Osx tocará pagar dos licencias. Para mi uso actual con BrowserSync y gulp tengo suficiente. No es lo mejor, pero suficiente.

Browsersync es un gran programa para el desarrollo web y la sencillez de gulp me esta gustando. Ahora falta añadir algun plugin más como maps y uglify para agilizar aún más el desarrollo. Pero eso, en próximos días.

Comentarios 0

Nadie ha comentado nada aún. Te animas ha ser el primero!! ;)

Opina libremente

Tu dirección de correo electrónico no será publicada.Todos los campos son obligatorios.