Rakefile

require 'rake/clean'

HAML   = FileList['**/*.haml']
LESS   = FileList['**/*.less']
COFFEE = FileList['**/*.coffee']

HTML = HAML.ext('html')
CSS  = LESS.ext('css')
JS   = COFFEE.ext('js')

CLOBBER.include(HTML, CSS, JS)

rule '.html' => '.haml' do |t|
   puts "  HAML #{t.source}"
   sh 'haml', t.source, t.name
end

rule '.css' => '.less' do |t|
   puts "  LESS #{t.source}"
   sh 'lessc', t.source, t.name
end

rule '.js' => '.coffee' do |t|
   puts "COFFEE #{t.source}"
   sh 'coffee', '-c', t.source
end

desc "Build all HTML, CSS and JavaScript files"
task :default => (HTML + CSS + JS)

desc "Continuously watch for changes and rebuild files"
task :watch => [:default] do
    require 'rubygems'
    require 'fssm'

    def rebuild
        sh 'rake'
        puts "    OK"
    rescue
        nil
    end

    begin
        FSSM.monitor(nil, ['**/*.coffee', '**/*.haml', '**/*.less']) do
            update { rebuild }
            delete { rebuild }
            create { rebuild }
        end
    rescue FSSM::CallbackError => e
        Process.exit
    end
end

(outdated comment, for 1.3+ pls use the config file to specify additional extensions like .haml to monitor)

…AND, if you are serving HAML via Rails, you will want to include .haml to the list of monitored extensions. See the screencast about how to do it for now; we're adding the configuration options to allow doing it easier soon.

Thanks so much. I changed the executable per directions on the screencast and it works great. Thanks!

The haml works fine but the SASS still isn't working. Any ideas?

Nevermind. It was my fault. It's all working. Thanks!

Now that 1.3 is released, please use the configuration file to monitor .haml extension and drop the local changes that you had to make previously.

Same with me like scottmessinger:
Sass is not working :( :( is there a way to set this up?

@flov Certainly there is. I'm not using SASS, but you can use LessCSS support as an example. If anyone is using this with SASS, can you please post your Rakefile?

I wanted to write a watcher to render Sass, but livereload worked poorly in our (huge) project because EventMachine kept erroring out with the message "too many open files". I've written a small script that's a replacement for livereload gem. It's designed for Rails projects, but can easily be edited. It supports Sass.

@mislav Thanks! I had the same problem. "too many open files". Ill check it out

The watch sass command can help us while waiting for the native sass support.
Simply run "sass --watch {source_dir}:{target_dir}" while running activereload and your sass changes will be autocompiled into the css => captured by activereload => updated on your browser

I am using LESS css, in the main page it says Livereload monitors LESS files, too, only that I should use this Rakefile. How do you use this rakefile? Thanks

@niksosf Save this gist as a file named Rakefile in the root of your project and run rake watch.

Please refer to http://docs.rubyrake.org/tutorial/index.html for more info — Rake is a great tool and is worth the learning time.

@andreyvit.
Second time in a day that you saved the day. Thank you. I am reading up on Rake now. Feel silly having used Rails for 2 years without know it.

@andreyvit. -- I have just gone through the tutorial you mentioned, but here are a couple of things that are not clear I though it maybe easier to state my case here rather than on Stackoverflow. First, the Rakefile that came with the rails app already has content in it, should I overwrite it? I think it is not right if each time I get a rakefile from a gem/plugin, I have to replace existing content in the Rakefile. -- So I tried pasting the content here for LIvereload to the bottom of the Rakefile and run
rake watch
but a bunch of obviously unrelated lines show up on screen that look like rake tasks from other gems.

I read up on the tutorial that you can specify which rake file to use by rake -f "path/to/rakefile", so I did
rake -f "lib/tasks/livereload.rake" watch
I renamed the rakefile to livereload.rake. But running that just hangs and nothing happened.

I appreciate any suggestions as to what I shall try next. Thanks again

@niksosf You did everything right — according to the Rakefile above, it does not output anything when watching. Just change some file, and it should be compiled. Feel free to add some puts statements. :)

And, no, you shouldn't overwrite the Rakefile from Rails — the best approach is to keep the file where you've put it, and to require lib/rasks/livereload.rake from your main Rakefile.

The problem is in this line:

task :watch => [:default] 

It invokes the default task before watching to regenerate content, however Rails defines it own version of default task. Change both occurrences of :default to something else (e.g. :rebuild), and you should be good to go.

@andreyvit
I added the line
require 'livereload'
to the Rakefile in the root dir
And I put livereload.rake in lib/tasks/.In livereload.rake, I changed both instances of :default to rebuild. Then when I run rake watch,
nothing happens.

So I thought, maybe it's monitoring and I should edit a shared.less file to see what happens. Indeed, after I edited and saved a sample file, something did happen:
C:/Users/Nik/.pik/rubies/Ruby-187-p299/bin/ruby.exe -I"lib;test" "C:/Users/Nik/.pik/rubies/Ruby-187-p299/lib/ruby/gems/1.8/gems/rake-0.8.7/lib/rake/ra
ke_test_loader.rb"
C:/Users/Nik/.pik/rubies/Ruby-187-p299/bin/ruby.exe -I"lib;test" "C:/Users/Nik/.pik/rubies/Ruby-187-p299/lib/ruby/gems/1.8/gems/rake-0.8.7/lib/rake/ra
ke_test_loader.rb"
C:/Users/Nik/.pik/rubies/Ruby-187-p299/bin/ruby.exe -I"lib;test" "C:/Users/Nik/.pik/rubies/Ruby-187-p299/lib/ruby/gems/1.8/gems/rake-0.8.7/lib/rake/ra
ke_test_loader.rb"
OK
rake

I also have another command prompt running the livereload server and it does not say that shared.css or shared.less is update.

Then I tried removing everything in that Rakefile in the root and inserting the livereload gist, leaving the two instances of :default as they are.

And then I run
rake watch
immediately, I see
LESS app/stylesheets/sessions/shared.less
lessc app/stylesheets/sessions/shared.less app/stylesheets/sessions/shared.css

And then I went to my texteditor to change something in the shared.less and saved it. This time, I got some pretty instant response:
rake
(in c:/r/bakery)
LESS app/stylesheets/sessions/shared.less
lessc app/stylesheets/sessions/shared.less app/stylesheets/sessions/shared.css
OK
with bakery dir being my rails app dir
And I see

Modified: shared.css

in the livereload server prompt.

Unfortunately, though everything seems okay now, the webpage itself is not reloaded even when the livereload prompt detected a modification. And I made sure that the livereload is working for erb, css, html, js, and etc, while doing all the above.

I am running on Windows 7 64bit, Ruby 1.8.7.

@niksosf To avoid spamming everyone here, please contact me at andreyvit@gmail.com for further assistance. Also, if you are serious about web development, please stop using Windows, it will always be making things more difficult for you.