Monday, June 11, 2012

Using LiveReload on Linux

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 Alt+Tab F5.

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

Leave the usual sacrifice of blood and caffeine by the side table. Thank you

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'

And execute

bundle exec guard init livereload

Monitored files and browser extension

Your generated 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 localhost:35729).

Once enabled, the guard-livereload server will notice it:

> Browser connected.
Browser URL: http://mymachine:myport/

Disco!

If you get here, any modification to monitored files (CSS stylesheets, images, even JavaScript files) is noticed and applied immediately at the browser without refreshing.

Guard comes whith a lot of different flavors to automatize tasks in different environments. Get your own, or follow their nice screencast.

More

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.

2 comments:

  1. One thing I hate about the ruby community, is that they assume that everyone uses ruby for everything.

    The title "Using LiveReload on Linux" is misleading. It should be "Using LiveReload for your ruby project on Linux".

    ReplyDelete
  2. We don't use ruby in our systems but we believe in the right tool for the job. At the time of this writing, LiveReload was a ruby product, and the best of its kind. Today, it's also available as a Sublime Editor plugin and there are many other tools available like Chrome workspaces and whatnot.

    ReplyDelete

Something on your mind?

Note: Only a member of this blog may post a comment.