LiveReload on Windows

LiveReload is a useful tool to have in any web developer’s toolkit. When I first started developing websites I had to refresh the page each time I modified the CSS/js/html/etc… LiveReload removes this minor annoyance and opens up a more streamlined workflow by scanning a specified directory for changes in multiple file types (CSS, js, html, sass including the .scss extension, and html) and when a change is detected LiveReload refreshes your browser through the its browser extension (needs to be installed separately). That way you don’t have to manually refresh the webpage after each code change. LiveReload comes in several different forms:

Software application with a GUI

LiveReload - Main Project View
LiveReload - Project Settings View

Port for Guard

*LiveReload DOES NOT work with Ruby 2.0.0-p195. Use Ruby 1.9.3-p429 with DevKit-tdm-32-4.5.2-20111229-1559-sfx.exe instead.
*If you’re going to install Guard make sure to setup the Ruby DevKit first.
DevKit setup instructions
Setup tutorial

Port for Grunt

Setup tutorial

Package for Sublime Text 2

Setup tutorial
To edit the settings of the LiveReload package first copy the default settings from Preferences>Package Settings>LiveReload>Settings-Default into the Settings-User file and make your changes in the user file. The default options are:

{
"version" : "1.6"
, "port" : 35729
, "delay_ms" : 100
, "apply_js_live" : false
, "apply_css_live" : true
, "apply_images_live" : true
}

The only LiveReload version that I haven’t used is with Grunt. The issue that I had with the LiveReload application and Sublime Text 2 package is that the web page got refreshed instantly after saving a .scss file which didn’t give Scout (great cross-platform app to compile sass files) enough time to compile the changes. Regardless of whatever I changed “delay_ms” to the result was the same (I tried editing the user settings and the defaults). This method only works with two subsequent file saves in order to get the browser to refresh after the changes have been compiled.

I’m currently using the guard version of LiveReload and I have it setup to only check for changes in html, css, and js files (not sass files). So Scout will be able to completely compile the changes and overwrite the old css file before the guard-livereload is triggered (watch the guard setup tutorial that I previously linked to for further instruction). I could use Guard to compile my sass files which would give me one less program to run but Scout hasn’t given me a reason to stray. I ran into quite a few issues getting Guard setup with LiveReload at first but it was worth chugging along and finding a solution in the end. If you run into any issues getting LiveReload setup make a comment and I’ll do what I can to help.

UPDATE:

Over the past few days I’ve run into several problems with grunt-livereload. The browser gets randomly disconnected in both Firefox and Chrome (beta) and the live refresh feature only works intermittently. Now I’m testing out another program called Prepros for compiling my Sass files and for css injection (live refresh).