Refrescar Chrome al cambiar el código del app Rails con Guard

Algo que he encontrado muy importante al estar finalizando detalles sobre todo en la parte FrontEnd, es el feedback inmediato en el navegador al realizar un cambio en nuestra app, sobre todo si tenemos una pantalla adicional para esto. Para que esto nos funcione automáticamente sin estar refrescando manualmente el navegador, en nuestra app Rails podemos integrar la gema guard-rails, el plugin guard-livereload y luego veremos dos opciones para el navegador.

Primero en nuestro Gemfile incluímos ambas gemas:

1
2
3
4
group :development do
gem 'guard-rails'
gem 'guard-livereload', require: false
end

Hacemos un bundle install y luego corremos los generadores de ambas gemas:

$ guard init rails

$ guard init livereload

El primer comando nos genera un archivo Guardfile y el segundo agrega tareas a ese archivo cómo:

1
2
3
4
5
6
7
8
guard 'livereload' do
watch(%r{app/views/.+\.(erb|haml|slim)$})
watch(%r{app/helpers/.+\.rb})
watch(%r{public/.+\.(css|js|html)})
watch(%r{config/locales/.+\.yml})
# Rails Assets Pipeline
watch(%r{(app|vendor)(/assets/\w+/(.+\.(css|js|html|png|jpg))).*}) { |m| "/assets/#{m[3]}" }
end

Ahora que ya tenemos Guard monitoreando cambios en nuestra aplicación, necesitamos conectar el navegador para que reciba estos eventos y refresque la página, para lo cual tenemos dos opciones:

  • Instalar una extensión en Chrome LiveReload

  • Agregar la gema rack-livereload que agrega código JavaScript a nuestra app. La gema funciona con WebSockets y en caso que el navegador utilizado no soporte WebSockets la gema genera un componente Flash para comunicarse con el navegador.

    • Para usarla necesitamos agregar al Gemfile la gema gem "rack-livereload", :group => :development hacemos bundle install
    • Luego debemos agregar al archivo config/environments/development.rb el siguiente código dentro del bloque de configuración config.middleware.use Rack::LiveReload

Ahora el último paso es arrancar nuestra app con el comando: bundle exec guard y todo ya debe estar funcionando!

avatar

Blog neyDroid

Desarrollando Vagancias