TL;DR

Para utilizar Guard y guard-livereload para recargar automáticamente la ventana de nuestro navegador cuando guardamos un fichero, instala ambos, configura el plugin de LiveReload para tu navegador y listo.

Si quieres más detalles, sigue leyendo ;)

Antes de nada

Aunque todo lo que se comenta en este post es útil sea cual sea la tecnología con la que trabajas, las herramientas que vamos a utilizar son todas del ecosistema Ruby, así que va a ser necesario tener una versión de Ruby instalada y funcionando. Si tu operativo es Linux o Mac OS X ya deberías tenerlo de serie. De todos modos, puedes informarte en Google :)

Bundler

Bundler es una herramienta para gestionar las dependencias de proyectos Ruby. Su instalación es muy sencilla:

1

$ gem install bundler

Para especificar las dependencias de nuestro proyecto crearemos un fichero Gemfile en el que indicaremos las gemas a instalar:

1
2
3
4

source 'http://rubygems.org' # gems source

gem '1st_gem_name' # 1st dependency
gem '2nd_gem_name' # 2nd dependency

Para instalar las gemas listadas en el Gemfile (y todas sus dependencias) bastará con ejecutar un comando:

1

$ bundle

Este mismo comando nos permitirá actualizar las gemas cada vez que cambiemos el Gemfile.

Por último, si alguna gema proporciona ejecutables, para asegurarnos de que todas las dependencias están cargadas, tendremos que ejecutarlos a través de Bundler mediante el comando bundle exec:

1

$ bundle exec some_gem_executable

Guard

Ya sabemos cómo instalar gemas cómodamente usando Bundler. Ahora hablemos de Guard.

Guard es una herramienta Ruby que permite automatizar tareas cuando se detecta algún cambio en el sistema de ficheros. ¿Para qué lo vamos a usar? En este caso para recargar automáticamente la ventana del navegador cuando se detecte un cambio en las plantillas de la vista, las CSS o el JS.

Este sería nuestro Gemfile:

1
2
3
4

source 'http://rubygems.org'

gem 'guard'
gem 'guard-livereload'

Es decir, vamos a instalar Guard y un plugin o guard llamado guard-livereload (como puedes ver en el wiki del proyecto, la lista de guards disponibles es muy extensa). guard-livereload recarga la ventana del navegador cuando detecta cambios en ficheros (más detalles cuando hablemos de LiveReload).

Guard tiene un DSL muy sencillo para describir qué hay que hacer cuando cambia un fichero y qué ficheros hay que “viligar”. Por defecto, Guard leerá estas reglas de un fichero Guardfile. El nuestro tiene esta pinta:

1
2
3
4

guard 'livereload' do
  watch(%r{public/.*}) # matches any file under the public directory
  watch(%r{views/.*})  # matches any file under the views directory
end

Traducido: cada vez que un fichero dentro de los directorios public o views cambie (en este caso el proyecto es una aplicación Sinatra y ahí están los ficheros CSS, JS y HTML/Erb), LiveReload se encargará de refrescar nuestro navegador. Si tienes dos monitores (o uno con el suficiente espacio) puedes decir adiós a Alt+Tab-Ctrl+R o la secuencia de teclas que uses habitualmente: podrás editar tu código y ver los cambios sin moverte del editor. Fuck yeah!

LiveReload

Te estarás preguntando dónde está la magia. Pues aquí: LiveReload, una herramienta que hace precisamente esto que estamos describiendo en este post: recargar la ventana del navegador cuando detecta cambios en los ficheros del proyecto. ¿Y por qué no la usamos directamente? Pues porque como dice en su propio sitio web:

if GUI is not your thing, guard-livereload is the next best choice.

Además, guard-livereload es la única opción para Linux :)

Ya hemos instalado guard-livereload en el paso anterior, así que nos queda instalar la extensión correspondiente en nuestro navegador (aquí LiveReload para Firefox y aquí LiveReload para Chrome).

Poniéndolo todo a funcionar

Suponiendo que estamos usando la configuración por defecto de LiveReload (si no es así puedes configurar el plugin del navegador y configurar las opciones disponibles de guard-livereload de manera acorde), solo nos resta:

• Activar LiveReload en el navegador, en la pestaña en la que estemos viendo nuestra aplicación en desarrollo (es decir, hacer click en el iconillo de LiveReload, uno que pone “LR”).
• Lanzar guard mediante el siguiente comando:

1

$ bundle exec guard

• Trabajar mientras miramos cómo el navegador se actualiza solo cada vez que guardamos un fichero :)