Como programar mas rapido con Livereload en Linux

http://feedproxy.google.com/~r/paraisoLinux/~3/o_ZELatvQYY/

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.

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.

Enviado por gReader

Anuncios
Esta entrada fue publicada en Programacio. Guarda el enlace permanente.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s