Livereload es una aplicacion que monitorea los cambios realizados en tus archivos css, html, js y otros a fin de recargar el navegador cuando se produzca un cambio. Si, parece una tonteria, pero no lo es.
Solo imaginen o recuerden la cantidad de veces que estan diseñando un sitio y hacen un cambio y tienen que apretar alt+tab para cambiar de la ventana del editor a la ventana del [navegador](https://paraisolinux.com/tienes-que- probar-seamonkey/), luego apretar F5 para que se recargue la pagina y esperar que se cargue. Estos pasos normalmente se repiten decenas o hasta cientos de veces mientras uno diseña y prueba un sitio. Livereload nos evita eso y nos permite ganar varios minutos y pasos.
Tiene algunas ventajas extras, por ejemplo: imaginen que estan queriendo darle formas, colores, sombras y demas a una ventana modal, o elementos que solo estan visibles temporalmente. En esa situacion la cantidad e pasos para darle estilos a eso aumenta y se vuelve todavia mas tedioso.
Con livereload podrian dividir su pantalla en 2 mitades, una para el editor y otra para el navegador, dejar la ventana modal abierta y mientras programan y guardan sus archivos en el editor pueden ver los cambios en el navegador justo al lado. Por supuesto que un monitor grande ayuda con esto y uno chiquito no :P
Con este video van a poder entender rapidamente el concepto.
LiveReload es una aplicacion para Ruby , asi que van a necesitar tenerlo instalado para usarlo. Ya explique como instalaar Ruby en Linux cuando di la introduccion a SASS.
Ahora vamos a instalar algunas cositas extras, en una consola pegan las siguiente lineas de codigo:
gem install bundle gem install guard gem install guard-livereload
Ahora se mueven con la consola dentro de la carpeta de su proyecto y escriben la siguiente linea:
bundle init
No tengan miedo que no se les va a borrar nada. Se les va a crear un archivo que se llama Gemfile, lo abren y le agregan al final lo siguiente:
gem ‘guard’ gem ‘guard-livereload’
Ahora en la misma consola(todavia dentro del directorio de su proyecto) escriben:
bundle exec guard init livereload
Ahora se le va a crear una archivo llamado Guarfile. Este contiene las especificaciones de los directorios y archivos que debe vigilar por cambios. El contenido con que se crea este archivo es bastante confuso, les dejo el mio que mas facil de entender:
[bash] # A sample Guardfile # More info at https://github.com/guard/guard#readme
guard ‘livereload’ do watch(%r{images/.}) watch(%r{stylesheets/.}) watch(%r{javascripts/.*}) end
[/bash]
Basicamente dice que vigile todo en el directorio de imagen, stylesheets y javascripts.
Todavia no terminamos, ya falta poco.
Ahora en la misma consola, dentro del directorio del proyecto, escriben:
bundle exec guard
Eso es lo que empieza a monitorear los archivos por cambios. Deben ejecutar ese comando cada vez que quieran hacer uso de livereload. Y dejar la consola abierta por supuesto.
Luego es solo cuestion de instalar y activar el plugin para firefox o chrome. Y listo.
Pueden parecer muchos pasos pero se hacen solo una vez y ayudan bastante.