Categories

Related tags

Making Browser Refresh in Response to Our Sources Modification

06 October 2013

We all are taught not to repeat ourselves while coding. Nonetheless we keep repeating the same operation over and over – pressing F5/Ctrl-R for browser reload every time we have to examine the results of our last changes. After watching some of Paul Irish screencasts where he was showing the magic of live reload under Sublime Text 2 I wondered if I could employ something alike while keeping working with my beloved NetBeans IDE. However in my case it wouldn’t be enough just to reload the page when any of watched files change. I need to compile SASS sources, combine atomic JavaScript chunks into a single module and sometimes flush the application cache.

Eventually I found a tool meeting all requirements I have. It turned out that Grunt task runner has a plugin grunt-contrib-watch , which keeps track of files modification events and fires up all the assigned tasks when a modification detected. Right after that the plugin triggers event by which the live reload script

updates the subscribed pages. As far as Grunt runs the ‘watch’ task provided by the plugin the live reload script is available on the configured port (35729 by default)

Configuring Grunt

As you see this approach requires Grunt. If don’t have that tool, it’s not a big deal. Grunt is available as a [nodejs|nodejs.com] package. So you can install Grunt globally using following command:

npm install -g grunt

To let Grunt know about your project you have to place package.json in the root of your project directory. It may look like that:

What is going on in here? We inform Grunt that we want to live reload for any files in css and js directories. This task obviously requires grunt-contrib-watch plugin. So we extend our package.json with the required dependencies list:

Now when we start the server and make any changes of the watched files the Grunt output will be like that:

Caveats

By and large grunt-contrib-watch serves me well. However if I happen to save a SASS file with an invalid syntax, something goes really wrong. One has to save the fixed files many times until the restored CSS gets available on the refreshing page.

We all are taught not to repeat ourselves while coding.. Nonetheless we keep repeating the same operation over and over – pressing F5/Ctrl-R for browser reload every time we have to examine the results of our last changes. After watching some of Paul Irish screencasts where he was showing the magic of live reload under Sublime Text 2 I wondered if I could employ something alike while keeping working with my beloved NetBeans IDE. However in my case it wouldn’t be enough just to reload the page when any of watched files change. I need to compile SASS sources, combine atomic JavaScript chunks into a single module and sometimes flush the application cache.

Eventually I found a tool meeting all requirements I have.

Who's the dude?

Dmitry Sheiko is a web-developer living and working in Frankfurt am Main, DE