AutoRefresh

AutoRefresh is inspired by XRefresh, a tool to automatically refresh your browser when a file has changed, allowing web designers working with multiple monitors to preview changes without leaving your editor.

XRefresh requires that you install a Firefox extension and run a local server to watch for changes in your files, and only works on Mac/Windows.

AutoRefresh approaches the problem in a different way, using watchr.

Installation

gem install autorefresh

Usage

Add the AutoRefresh gem to your project

require 'autorefresh'

Insert a JavaScript snippet in your page template using the AutoRefresh helper. Remember only to include this snippet in your development environment, so users don’t end up getting their page refreshed. You should give your channel a unique name that won’t conflict with other developers using AutoRefresh.

<html>
  <head>
    <%= AutoRefresh.channel('myproject') %>
  </head>
</html>

Now create a refresh.watchr file (or use an existing file, if you are already using Watchr to run your tests), and add some rules for the files you want to watch using regular expressions.

refresh.watchr

watch( 'public/stylesheets/.*\.css' ) { |m| system('autorefresh myproject') }

Now run Watchr to begin observing changes in your files.

$ watchr refresh.watchr

And enjoy your new workflow!

Usage without ERB

Simply use this snippet instead of the automatic helper.

<script src="http://js.pusherapp.com/1.6/pusher.js" type="text/javascript"></script>
<script type="text/javascript">
  var pusher = new Pusher('a2024b659f492cab86cc');
  pusher.subscribe('yourproject');
  pusher.bind('refresh', function(data) {
    location.reload(true);
  });
</script>

Usage without Watchr

The autorefresh system command sends a refresh signal to your channel.

$ autorefresh myproject

You could bind this to a key in your editor, or whatever other method you prefer.

Contributing to AutoRefresh