Yesterday I came across a "Getting Started with SASS" video at CSS-Tricks where the presenter was using CodeKit. Now, CodeKit is a sass/less/jade/++ file listener / compiler for Mac, but one interesting feature I noticed was the auto refresh and css/javascript injection of compiled sources into a running browser. No more manual window swapping and refresh. Just code away and see the changes as they happen in the browser. Very cool. I want...
That of course spawned a little Google Search session. The end result was simpler then anticipated.
Check this little YouTube video: LiveReload+Awestruct
There is a plugin to Guard called LiveReload. What this does is simply to act as a LiveReload backend and push messages to the LiveReload Chrome Extension when a file change. Pretty simple.
To set it up all you need to do is:
gem install guard-livereload
gem install yajl-ruby
Go to your favorite Awestruct based website and add this your Guardfile:
guard 'livereload' do
watch(%r{_site/.+\.(css|js|html|json)})
end
Now you have Guard configured to listen for changes in Awestruct's output folder, _site/. Awestruct it self is already listening to the source folders to trigger compile, so no extra is needed here.
Next step is to install the LiveReload Chrome Extension. This gives you a little LR icon in your tool bar. We'll get back to that.
To start up the whole thing we do the following:
guard start
The output should be similar to:
Guard uses NotifySend to send notifications.
Guard is now watching at '/home/aslak/dev/source/testing/arquillian.github.com'
LiveReload 1.6 is waiting for a browser to connect.
>
In a new console you start up Awestruct:
awestruct -d
Go to the normal Awestruct localhost url, http://localhost:4242/. Connect the Browser client to the file system watcher by pressing the shiny new LR button. The guard process should tell you that the client has connected:
> Browser connected.
Browser URL: http://localhost:4242/
That's it! Change any of the source files in your site and see the browser refresh/reload the resources.