fix(watch): support array of source files

closes #663

Author: JeroenVinke

lib/resources/tasks/watch.js

@@ -12,34 +12,44 @@ import copyFiles from './copy-files';
 const debounceWaitTime = 100;
 let isBuilding = false;
 let pendingRefreshPaths = [];
-let watches = {};
 let watchCallback = () => { };
+let watches = [
+  { name: 'transpile', callback: transpile, source: project.transpiler.source },
+  { name: 'markup', callback: processMarkup, source: project.markupProcessor.source },
+  { name: 'CSS', callback: processCSS, source: project.cssProcessor.source }
+];
 
-watches[project.transpiler.source] = { name: 'transpile', callback: transpile };
-watches[project.markupProcessor.source] = { name: 'markup', callback: processMarkup };
-watches[project.cssProcessor.source] = { name: 'CSS', callback: processCSS };
 if (typeof project.build.copyFiles === 'object') {
   for (let src of Object.keys(project.build.copyFiles)) {
-    watches[src] = { name: 'file copy', callback: copyFiles };
+    watches.push({ name: 'file copy', callback: copyFiles, source: src });
   }
 }
 
 let watch = (callback) => {
   watchCallback = callback || watchCallback;
 
-  const watchPaths = Object.keys(watches);
-
-  for(let i = 0; i < watchPaths.length; i++) {
-    gulpWatch(
-      watchPaths[i],
-      {
-        read: false, // performance optimization: do not read actual file contents
-        verbose: true
-      },
-      (vinyl) => processChange(vinyl));
+  // watch every glob individually
+  for(let watcher of watches) {
+    if (Array.isArray(watcher.source)) {
+      for(let glob of watcher.source) {
+        watchPath(glob);
+      }
+    } else {
+      watchPath(watcher.source);
+    }
   }
 };
 
+let watchPath = (p) => {
+  gulpWatch(
+    p,
+    {
+      read: false, // performance optimization: do not read actual file contents
+      verbose: true
+    },
+    (vinyl) => processChange(vinyl));
+};
+
 let processChange = (vinyl) => {
   if (vinyl.path && vinyl.cwd && vinyl.path.startsWith(vinyl.cwd)) {
     let pathToAdd = vinyl.path.substr(vinyl.cwd.length + 1);
@@ -60,11 +70,20 @@ let refresh = debounce(() => {
   let paths = pendingRefreshPaths.splice(0);
   let refreshTasks = [];
 
-  // Dynamically compose tasks
-  for (let src of Object.keys(watches)) {
-    if (paths.find((x) => minimatch(x, src))) {
-      log(`Watcher: Adding ${watches[src].name} task to next build...`);
-      refreshTasks.push(watches[src].callback);
+  // determine which tasks need to be executed
+  // based on the files that have changed
+  for (let watcher of watches) {    
+    if (Array.isArray(watcher.source)) {
+      for(let source of watcher.source) {
+        if (paths.find(path => minimatch(path, source))) {
+          refreshTasks.push(watcher);
+        }
+      }
+    }
+    else {
+      if (paths.find(path => minimatch(path, watcher.source))) {
+        refreshTasks.push(watcher);
+      }
     }
   }
 
@@ -74,9 +93,11 @@ let refresh = debounce(() => {
     return;
   }
 
+  log(`Watcher: Running ${refreshTasks.map(x => x.name).join(', ')} tasks on next build...`);
+
   let toExecute = gulp.series(
     readProjectConfiguration,
-    gulp.parallel(refreshTasks),
+    gulp.parallel(refreshTasks.map(x => x.callback)),
     writeBundles,
     (done) => {
       isBuilding = false;

lib/resources/tasks/watch.ts

@@ -12,34 +12,44 @@ import copyFiles from './copy-files';
 const debounceWaitTime = 100;
 let isBuilding = false;
 let pendingRefreshPaths = [];
-let watches = {};
 let watchCallback = () => { };
+let watches = [
+  { name: 'transpile', callback: transpile, source: project.transpiler.source },
+  { name: 'markup', callback: processMarkup, source: project.markupProcessor.source },
+  { name: 'CSS', callback: processCSS, source: project.cssProcessor.source }
+];
 
-watches[project.transpiler.source] = { name: 'transpile', callback: transpile };
-watches[project.markupProcessor.source] = { name: 'markup', callback: processMarkup };
-watches[project.cssProcessor.source] = { name: 'CSS', callback: processCSS };
 if (typeof project.build.copyFiles === 'object') {
   for (let src of Object.keys(project.build.copyFiles)) {
-    watches[src] = { name: 'file copy', callback: copyFiles };
+    watches.push({ name: 'file copy', callback: copyFiles, source: src });
   }
 }
 
-let watch = (callback?) => {
+let watch = (callback) => {
   watchCallback = callback || watchCallback;
 
-  const watchPaths = Object.keys(watches);
-
-  for(let i = 0; i < watchPaths.length; i++) {
-    gulpWatch(
-      watchPaths[i],
-      {
-        read: false, // performance optimization: do not read actual file contents
-        verbose: true
-      },
-      (vinyl) => processChange(vinyl));
+  // watch every glob individually
+  for(let watcher of watches) {
+    if (Array.isArray(watcher.source)) {
+      for(let glob of watcher.source) {
+        watchPath(glob);
+      }
+    } else {
+      watchPath(watcher.source);
+    }
   }
 };
 
+let watchPath = (p) => {
+  gulpWatch(
+    p,
+    {
+      read: false, // performance optimization: do not read actual file contents
+      verbose: true
+    },
+    (vinyl) => processChange(vinyl));
+};
+
 let processChange = (vinyl) => {
   if (vinyl.path && vinyl.cwd && vinyl.path.startsWith(vinyl.cwd)) {
     let pathToAdd = vinyl.path.substr(vinyl.cwd.length + 1);
@@ -60,11 +70,20 @@ let refresh = debounce(() => {
   let paths = pendingRefreshPaths.splice(0);
   let refreshTasks = [];
 
-  // Dynamically compose tasks
-  for (let src of Object.keys(watches)) {
-    if (paths.find((x) => minimatch(x, src))) {
-      log(`Watcher: Adding ${watches[src].name} task to next build...`);
-      refreshTasks.push(watches[src].callback);
+  // determine which tasks need to be executed
+  // based on the files that have changed
+  for (let watcher of watches) {    
+    if (Array.isArray(watcher.source)) {
+      for(let source of watcher.source) {
+        if (paths.find(path => minimatch(path, source))) {
+          refreshTasks.push(watcher);
+        }
+      }
+    }
+    else {
+      if (paths.find(path => minimatch(path, watcher.source))) {
+        refreshTasks.push(watcher);
+      }
     }
   }
 
@@ -74,9 +93,11 @@ let refresh = debounce(() => {
     return;
   }
 
+  log(`Watcher: Running ${refreshTasks.map(x => x.name).join(', ')} tasks on next build...`);
+
   let toExecute = gulp.series(
     readProjectConfiguration,
-    gulp.parallel(refreshTasks),
+    gulp.parallel(refreshTasks.map(x => x.callback)),
     writeBundles,
     (done) => {
       isBuilding = false;