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.