This is a guest entry from José Roberto Vidal, our newest acquisition at Extrema Sistemas. It's a perfect combination between me, not having enough time to write something coherent, and Roberto having something interesting to say and nowhere to stick it on. You can also find a Spanish version here.
LiveReload is an application that allows you to refresh automatically your browser whenever any file gets modified, even compiling any Sass / Less / CoffeeScript files. In a nutshell, it avoids you the tedious-to-death
Its installation in Mac OS or Windows is quite straightforward, but things get a bit trickier with Linux (surprise, surprise). This is what this post is about.
Installation and configuration
Where Ruby gems get involved:
sudo apt-get install ruby1.9.1 ruby1.9.1-dev
Now you can use RubyGems to get the application. Inside your project folder, do:
sudo gem install bundle sudo gem install guard sudo gem install guard-livereload bundle init
Edit the recently created
Gemfile and add these two lines:
gem 'guard' gem 'guard-livereload'
bundle exec guard init livereload
Monitored files and browser extension
Guardfile includes some predefined monitoring folders that you may have to modify if yours is not a Rails project. After that, just start the Guard server:
$ bundle exec guard Guard uses NotifySend to send notifications. Guard is now watching at '/home/me/workspace/project' LiveReload 1.6 is waiting for a browser to connect. >
At this point you probably can't wait to crack your knuckles and give it a try... Download the LiveReload extension for your browser (Chrome, Firefox) and configure it (right click -> options) to specify the hostname and port used by the Guard server (by default
Once enabled, the
guard-livereload server will notice it:
> Browser connected. Browser URL: http://mymachine:myport/
This is one of the labs that you can find in our HTML5+CSS3 course, together with Bootstrap, Sass and another 25 labs. It's just three days that you may choose to come to one of our public scheduled dates or make one specific for your own company.