Author image
Senior Developer

Guard livereload

Livereload is one the coolest things to happen to frontend development in the last little while, and actually it can really speed up your work. Basically it re-loads your CSS (and Javascript some of the time) automatically as you make changes. You don't have to make a change and then switch to your browser and manually reload the entire page, change 'notifications' are pushed to the browser where they will trigger that single changed file to be reloaded.

There are lots of sites detailing how it works, and there's a great Mac program called: LiveReload that will get you up and running super quick, if you have a Mac. If you have linux though, it's actually really simple too.

Guard

Guard is a ruby command line tool that will allow you to take action when a file changes on disk, and some clever people have written a livereload action for Guard: guard-livereload.

Installing guard-livereload

Installing Ruby applications can turn into a bit of a nightmare when it comes to dependencies, but as I'm 95% a PHP developer I don't really have anything else using Ruby, and it just seemed to work in Ubuntu anyway. But, you may have to do things differently here possibly.

apt-get install rubygems ruby-dev
gem install guard-livereload

That should be it, all dependencies should get resolved for you by the various tools.

Configuring guard-livereload

The easiest way to set up Guard correctly is to create a config file in your home directory called .Guardfile and enter the following in it:

# https://github.com/guard/guard-livereload
guard :livereload do
  watch(%r{.+\.(css|js)$})
end

This will allow you to run guard from any directory on your filesystem, and watch all the subdirectories for changes to either .css or .js files.

Running

You should now be able to open a terminal window, navigate to the root directory of the Drupal site you want to use livereload on, and run the command guard. It should tell you that it's started monitoring the folder, and that livereload has loaded. You then leave this running as you develop.

Browser plugins

You need a plugin in the browser to actually do the livereloading of the CSS or JS, these are exactly the same ones that the Mac LiveReload program provides, and you can download them from their website. You basically get a little button on your toolbar, which when viewing your site if you press, will connect to the server and start listening for changes to files.

Comments

Some days ago I discovered LiveReload too, and tested in Windows 7, although it's an free alpha version, it worked ! It's very useful, bye bye F5

Man, I'm on Linux and I don't work with Ruby, so when the LiveReload site kicked me over to the Guard LiveReload GitHub webpage, the whole "ruby gem" stuff made my eyes roll back into my head. But your simple description of how to make this work on Linux saved me a ton of self-education.

Seems to work really well with Chromium. I can't get the Firefox plugin to work right, but this will do for now.

Thanks for your help!

what a great post, just signed up to your RSS feed and hope to read more of your posts in the future. keep it up!

David,
Could you do a write-up on how you made this work on Windows? I assume you were you using a dev server running on your PC.

I'm trying to get my Windows browsers to reload while editing files on a remote Linux server (via a mapped drive or via a Putty terminal). There are some tips on this workflow but I'm not successful yet.

Comments on this article are now closed, if you want to give us feeback you can use our contact form instead.