In the previous post we added jshint to catch errors/mistakes early in the build process.
With the current grunt configuration you might find the feedback loop extremely painful. That's because any time you modify html or javascript you need to manually execute "grunt local" from the command line and then refresh the browser. Why not rebuild the assets automatically and refresh the browser for you? This is where grunt-contrib-watch comes to the rescue!
The first step is to install the npm module itself after adding it to the package.json file.
Next we need to load the npm module at the top of our Gruntfile.js and add the watch task with a few options.
The first option worth calling out is the livereload. If you install the chrome plugin and enable it, this will reload the page for you any time a file you configure to watch changes. You configure the file types in the section below. In this example, we want to reload when a handlebars template or javascript file changes.
The last option requires a little re-work because the watch task needs another "task" to run when it gets triggered. Because we already have everything we need in the local task, I simply renamed local to dev and made local a combination of dev + watch. This way we can reuse it to keep the configuration DRY-ish.
Now that our grunt build includes watch + live reload, we can move onto testem!
If you want to follow along on github, this repository has a commit for each part in the series
