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
(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):
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.