Are you still hitting the refresh button every time you change some code / stylesheet? If yes, you may want to watch the following video and learn about LiveReload by Mikhail Gusarov.
Yes, I know there are already a few other tools out there that do this, but I don’t think I’ve seen any that actually reload the CSS or Javascript without even reloading the page. I also forgot to mention in the video that it works in both Safari AND Chrome.
Awesome… Thanks for sharing…
A timely find, Gregg, as I’ve been exploring websocket uses the last few days and Mikhail Gusarov’s LiveReload ranks high on my list of compelling websocket applications. I’m certain we’ll see many more sprouting up all over as the websocket standard is finalized and makes its way into all browsers. Presumably this is why MG couldn’t add Firefox support for LiveReload–yet. Although it probably won’t be long since FF 4 beta has websocket support.
Websockets are going to be the biggest thing since AJAX, I tell ya! A topic worthy of an EnvyCast, IMO. :-)
This. Is. So. Awesome. Thanks for sharing this Gregg.
Nice tip. Funny how excited Greg was with it in the screencast. Thanks!
Will this work with haml/sass/compass?? – it seems like it might if you added the haml file extension and had compass watch running in another terminal session.
LIKE SAME AS XREFRESH FOR FIREFOX
Very nice. Hope it sees native fs-event watching support soon.
Also I second Ben’s opinion about WebSockets.
Only insane people still messing around with comet crap :-)
@Alan we use it whilst using compass watch as well. Works a treat. You could also look at this http://gist.github.com/472349 to handle processing lots of file types.
Apparently livereload now supports configuration. You can create a .livereload file either in your home or your project and do (I think):
config.exts << 'erb'
Except that the default now includes erb. I used it to add "rhtml" because my project still uses those (not for long) ;)
it’s very cool!!
[...] 在開始使用 LiveReload 前，你可以先觀看由 EnvyLabs 拍攝的示範影片，了解使用方式。相信我，裝了它之後你就會愛上它了。 [...]
See less.js, it does something similar without any server process or browser plugin.
http://ajaxian.com/archives/do-less-with-less-js
It’s pretty cool, but so is the mentioned app in this article. Though I don’t quite follow how the template reloading would work. That part is damn cool!, it doesn’t reload the whole page right? Or does it? I’m probably being optimistic thinking it actually somehow does only partial page updates.
I can’t make it work!
I’m running Ubuntu Lucid and when I click the Chrome Extension icon it says “Cannot connect to LiveReload server. Please run livereload command from the directory you want to watch.” but the server it’s running in the folder I want to watch.
Version: 1.3 (compatible with browser extension versions 1.3.x)
Port: 10083
Watching: /home/movihus/code/repo/inventario_impresoras
– extensions: .html .css .js .png .gif .jpg .php .php5 .py .rb .erb
– excluding changes in: */.git/* */.svn/* */.hg/*
LiveReload is waiting for browser to connect.
What’s wrong?
Very good!!!
Thanks for share :)
This is awesome, even for starters and peeps using stuff like scaffold :)
OMG!!! This will save me hours of work. What a brilliant idea. Besides, I’m really sick of pressing ctrl r. My fingers will love this even more than me.
i am a complete newby to ruby, command-line etc… and i have followed all the instructions at https://chrome.google.com/extensions/detail/jnihajbhpnppcggbcgedagnkighmdlei
Until the last instruction states: “USAGE: run “livereload” in the folder you want to monitor…”
How??? i don’t know what this means… how do you run it in the folder? Using terminal? if so, what’s the command?
Would LOVE to have this work, but i am at a loss… please help!
Solved! i got a quick reply via Twitter from @livereload:
“@Jtsternberg In Terminal, execute “sudo gem install livereload” to install LR, then execute “livereload ~/path/to/your/project” to run.” – http://twitter.com/#!/livereload/status/28964016619
Also important to note: i had to have mamp running, as “file:///” urls do not work.
Do you need to be running a server locally e.g. MAMP? or can you override a site with it?
works “again” on OS X (Chrome, not yet Safari, no clue why):
https://github.com/mockko/livereload/issues/#issue/26
More specifically: https://github.com/mockko/livereload/issues/#issue/26/comment/527779
[...] 在開始使用 LiveReload 前，你可以先觀看由 EnvyLabs 拍攝的示範影片，了解使用方式。相信我，裝了它之後你就會愛上它了。 [...]
I discovered your blog on yahoo and checked a few of your early posts. I hope you will keep up the very good work. I just added your RSS feed to my MSN News Reader. I’m seeing forward to reading more from you later on!
[...] installation process for Rails is a little different. The team at EnvyLabs has also created a four-minute screencast showing LiveReload in [...]
[...] installation process for Rails is a little different. The team at EnvyLabs has also created a four-minute screencast showing LiveReload in action. Tweet This entry was posted in Uncategorized and tagged [...]
Awesome tool … !!!
[...] LiveReload Screencast « Envy Labs This entry was posted in Uncategorized by justin. Bookmark the permalink. [...]
Another way around is to use cssUpdater (http://www.cssUpdater.com) in which you edit all your changes in FireBug, click the “Sync now” button and you are done!
So the application listen to your CSS changes and save them back to your original CSS file. Exactly the opposite of LiveReload I guess :)