How to use vogue to automatically reload your css on the fly (cross-browser, cross-framework)

We've recently discovered vogue: a node.js-based awesome livereload alternative. And we love it.

Since going to your web browser and reloading it manually every time you make a change in your CSS is a pain in the ass, we were using mockko's livereload along with its Chrome extension to avoid doing this and make the chrome extension reload the page for us.

But for some reason (which I really don't know!) livereload is kind of unmantained. The last commits are from 2010 (sooo in the past!) and some weird bugs featuring rubycocoa and osx/foundation make it impossible to work on OSX.

But that's when andrewdavey's vogue comes into the game, and it's striking very hard.

Vogue is a node.js-based solution to accomplish the same objective. But with a neat idea: Using socket.io along with a node.js server connected to your front-end to notify the front-end of filesystem changes ninja-style.

To make it work, you just have to install node.js and its gem-like packaging tool:

brew install node
curl http://npmjs.org/install.sh | sh

And then vogue:

npm install vogue

Your application layout only needs to include a javascript file which is served by vogue itself :

<script src="http://localhost:8001/vogue-client.js?base=http://localhost:8001">

(you may want to add a condition like if Rails.env.development? to only use vogue when developing)

And fire up vogue server right inside your assets path (public folder in Rails):

vogue .

And that should do the trick! When you change a CSS file, it should be magically reload inside your browser. Ta-da!

Thanks to Andrew Davey for such a great tool.

Note: If you're using compass, you might want to also start compass watch alongside with vogu to make compass compile your sass files and then chain the reaction to vogue.