LiveReload applies CSS/JS changes to Safari or Chrome w/o reloading the page (and autoreloads the page when HTML changes)
JavaScript Ruby
Switch branches/tags
Nothing to show
Pull request Compare This branch is 1 commit ahead, 137 commits behind mockko:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
LiveReload.chromeextension
LiveReload.safariextension
artwork
docs/images
server
.gitignore
LiveReload-update.plist
README.md
Rakefile

README.md

LiveReload: xrefresh for Safari & Chrome

LiveReload is a Safari/Chrome extension + a command-line tool that:

  1. Applies CSS and JavaScript file changes without reloading a page.
  2. Automatically reloads a page when any other file changes (html, image, server-side script, etc).

What's new?

1.2.1: added workaround for Chrome bug (unable to open WebSocket to localhost), fixed problem with command-line tool trying to use kqueue on Linux.

1.2: added Chrome extension, added icon artwork, added a check that the command-line tool version is compatible with the extension version, fixed a bug with multiple stylesheet updates happening too fast.

1.1: enabled autoupdating for the Safari extension.

1.0: original release -- Safari extension and a command-line tool in a Ruby gem.

Installing in Safari

  1. You need Ruby installed. Mac OS X users already have it, Windows users get it from ruby-lang.org.

  2. Install the command-line tool:

     sudo gem install livereload
    
  3. If you haven't already, you need to enable Safari extensions.

  4. Download LiveReload 1.2 extension. Double-click it and confirm installation:

Installing in Chrome

  1. You need Ruby installed. Mac OS X users already have it, Windows users get it from ruby-lang.org.

  2. Install the command-line tool:

     sudo gem install livereload
    
  3. Visit the LiveReload page on Chrome Extension Gallery and click Install. Confirm the installation:

Done. Now you have an additional button on your toolbar:

Usage

Run the server in the directory you want to watch:

% livereload

You should see something like this:

Now, if you are using Safari, right-click the page you want to be livereload'ed and choose “Enable LiveReload”:

If you are using Chrome, just click the toolbar button (it will turn green to indicate that LiveReload is active).

Limitations

Note that you can only have one page monitored, so if you enable LiveReload on another page, the first one will stop reloading.

LiveReload does not work with local files in Chrome (since accessing file:// URLs from an extension requires an approval from the Google Chrome team) and in Safari (since we haven't bothered fixing it yet).

License

This software is distributed under the MIT license.

Thanks

LiveReload has been greatly inspired by (and actually borrows a few lines of code from) XRefresh, a similar tool for Firefox.