User Tools

Site Tools


entwine:watching_files_for_changes

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

entwine:watching_files_for_changes [2016/05/18 21:44]
klembot
entwine:watching_files_for_changes [2017/10/09 20:39]
Line 1: Line 1:
-===== 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: 
- 
-<code javascript Gruntfile.js>​ 
-module.exports = function(grunt) { 
-  require('​load-grunt-tasks'​)(grunt);​ 
-  ​ 
-  grunt.initConfig({ 
-    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'​]);​ 
-}; 
-</​code>​ 
- 
-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: 
- 
-<​code>​ 
-Running "​watch"​ task 
-Waiting... 
-</​code>​ 
- 
-Nothing yet. Now open Twine and start editing your story. As you do, Grunt will start saying things like: 
- 
-<​code>​ 
->> File "​../​../​Documents/​Twine/​Stories/​My Story.html"​ changed. 
-Running "​copy:​fromTwine"​ (copy) task 
-Copied 1 file 
- 
-Done. 
-</​code>​ 
- 
-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. 
entwine/watching_files_for_changes.txt ยท Last modified: 2017/10/09 20:39 (external edit)