Watching Files For Changes

This probably seems like quite a lot of work just to copy a file from one place to another. There are two main advantages to using Grunt – performing long sequences of tasks, and automatically running tasks as you work – and you haven't seen either yet. Let's change that by trying out the second of those.

This section assumes you've completed the ones before this and have Grunt set up to copy a story file to your src folder. Let's make this reactive.

First, type npm install --save grunt-contrib-watch in your terminal window and press Enter. npm will install the watch plugin, which will run tasks when files change.

Then, change your Gruntfile so it reads:

module.exports = function(grunt) {
    copy: {
      fromTwine: {
        src: '/Users/Me/Documents/Twine/Stories/My Story.html',
        dest: 'src/'
    watch: {
      twineStories: {
        files: '/Users/Me/Documents/Twine/Stories/My Story.html',
        tasks: 'copy:fromTwine'
  grunt.registerTask('default', ['copy']);

Remember that you'll need to change the path in the files and src properties above to make it match your story file's location. Configuring the watch plugin is very straightforward. You tell it what files to watch for changes, and then what tasks to run whenever they do.

Now type grunt watch in your terminal window and press Enter. It will reply:

Running "watch" task

Nothing yet. Now open Twine and start editing your story. As you do, Grunt will start saying things like:

>> File "../../Documents/Twine/Stories/My Story.html" changed.
Running "copy:fromTwine" (copy) task
Copied 1 file


As Twine saves changes to your story, the version in your src will always stay in sync with it so long as you keep Grunt running in the background. To stop Grunt, press Control-C in your terminal window. Windows will ask if you're sure you want to end the job – you can say yes. On OS X and Linux, Grunt will immediately stop. To restart the process, just type grunt watch and press Enter again. (You can also press the up arrow key to go back to your most recent command.)