Add file watch and live reload with Browsersync

[thibaudcolas]

Hey there,

first off thanks for creating / maintaining this project. It's quite interesting :)

Here's a small PR to live-reload the browser when working on the exercises. I think that it can be helpful in order to reduce the back and forth between the editor and the test results.

This is done by replacing finalhandler and serve-static with Browsersync (http://www.browsersync.io). It serves the files, and also takes care of watching app/**/*.js and injecting a live-reload script into the test runner.

If there's interest, we could go a little bit further (either in this PR or in another one):

• Enable automatic opening of the tests in the browser when the project is started (this is just Browsersync configuration).
• Replace the grunt connect/watch tooling with this too.

[jamesplease]

Hi @ThibWeb ! Thanks for the PR. Did grunt develop not work for you?

Or maybe this is an indication that we should call out the existing Livereload feature a bit more prominently in the readme...hm.

[thibaudcolas]

Nope, it works just fine! From the README I got the develop task as a development aid rather than something that end users are supposed to do (we get JSHint + Grunt's output, not sure if that's an issue).

It's true that the same result can be achieved with these though :) I tried to have the live reload while keeping the behavior identical (command output, env variables) but I may have overthought it. Is there any reason for grunt develop not being the default "npm start"?

[rmurphey]

I like this approach for those who don't want to install grunt globally. I wouldn't mind getting rid of grunt entirely because it seems unnecessary after this change.