Servicios de desarrollo

Como programar mas rapido con Livereload en Linux

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, 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.

LiveReload

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

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:

# 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

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.

perro

Ingeniero en Informática. Programador en PHP y Angular. Lo que mas adoro en el mundo es el conocimiento. Y el anime....y Japón...y el running...y bloguear claro y algunas otras cientos de cosas. Sigo buscando la manera de hacer mi primer millón.

2
Comenta!

avatar
themanuelrc
themanuelrc

Hola! En Ubuntu, no funciona sólo con instalar en sublime text desde package control y luego instalar la extensión, en chrome, por ejemplo? Es necesario hacer el otro proceso que mencionas?

sefsinalas

Si, solo hace falta hacer eso que tu dices. Lo probe tambien en Arch. Debe ser que la extension para sublime hace el resto del proceso o algo parecido