fix/enhancement(cli) improve --watch flag

The improved --watch flag causes fewer crashes, performs better and is now also available on the build command. Closes aurelia#293 and aurelia#265.
jwx · Jun 9, 2017 · a0c110d · a0c110d
1 parent 9bfe9bc
commit a0c110d
Show file tree

Hide file tree

Showing 12 changed files with 337 additions and 121 deletions.
diff --git a/lib/cli-options.js b/lib/cli-options.js
@@ -5,6 +5,13 @@ exports.CLIOptions = class {
     exports.CLIOptions.instance = this;
   }
 
+  taskName() {
+    let name = this.taskPath.split(/[/\\]/).pop();
+    let parts = name.split('.');
+    parts.pop();
+    return parts.join('.');
+  }
+
   getEnvironment() {
     let NODE_ENV;
     let env = this.getFlagValue('env') || (process.env.NODE_ENV ? NODE_ENV = process.env.NODE_ENV : undefined) || 'dev';
@@ -66,6 +73,10 @@ exports.CLIOptions = class {
     return null;
   }
 
+  static taskName() {
+    return exports.CLIOptions.instance.taskName();
+  }
+
   static hasFlag(name, shortcut) {
     return exports.CLIOptions.instance.hasFlag(name, shortcut);
   }

diff --git a/lib/commands/new/project-template.js b/lib/commands/new/project-template.js
@@ -118,7 +118,8 @@ exports.ProjectTemplate = class {
       ProjectItem.resource('build.json', 'tasks/build.json'),
       ProjectItem.resource('copy-files.ext', 'tasks/copy-files.ext', this.model.transpiler),
       ProjectItem.resource('run.ext', 'tasks/run.ext', this.model.transpiler),
-      ProjectItem.resource('run.json', 'tasks/run.json')
+      ProjectItem.resource('run.json', 'tasks/run.json'),
+      ProjectItem.resource('watch.ext', 'tasks/watch.ext', this.model.transpiler)
     ).addToGenerators(
       ProjectItem.resource('attribute.ext', 'generators/attribute.ext', this.model.transpiler),
       ProjectItem.resource('attribute.json', 'generators/attribute.json'),
@@ -150,12 +151,14 @@ exports.ProjectTemplate = class {
       'aurelia-tools',
       'browser-sync',
       'connect-history-api-fallback',
+      'debounce',
       'gulp',
       'gulp-changed-in-place',
       'gulp-plumber',
       'gulp-rename',
       'gulp-sourcemaps',
       'gulp-notify',
+      'gulp-watch',
       'minimatch',
       'through2',
       'uglify-js',

diff --git a/lib/dependencies.js b/lib/dependencies.js
@@ -20,6 +20,7 @@ let versionMap = {
   'bluebird': '^3.4.1',
   'browser-sync': '^2.13.0',
   'connect-history-api-fallback': '^1.2.0',
+  'debounce': '^1.0.2',
   'event-stream': '^3.3.3',
   'gulp': 'github:gulpjs/gulp#4.0',
   'gulp-babel': '^6.1.2',
@@ -36,6 +37,7 @@ let versionMap = {
   'gulp-stylus': '^2.5.0',
   'gulp-typescript': '^3.1.4',
   'gulp-tslint': '^5.0.0',
+  'gulp-watch': '^4.3.11',
   'html-minifier': '^3.2.3',
   'jasmine-core': '^2.4.1',
   'karma': '^0.13.22',

diff --git a/lib/resources/tasks/build.js b/lib/resources/tasks/build.js
@@ -1,12 +1,13 @@
 import gulp from 'gulp';
+import {CLIOptions, build as buildCLI} from 'aurelia-cli';
 import transpile from './transpile';
 import processMarkup from './process-markup';
 import processCSS from './process-css';
 import copyFiles from './copy-files';
-import {build} from 'aurelia-cli';
+import watch from './watch';
 import project from '../aurelia.json';
 
-export default gulp.series(
+let build = gulp.series(
   readProjectConfiguration,
   gulp.parallel(
     transpile,
@@ -17,10 +18,23 @@ export default gulp.series(
   writeBundles
 );
 
+let main;
+
+if (CLIOptions.taskName() === "build" && CLIOptions.hasFlag("watch")) {
+  main = gulp.series(
+    build,
+    (done) => { watch(); done(); }
+  );
+} else {
+  main = build;
+}
+
 function readProjectConfiguration() {
-  return build.src(project);
+  return buildCLI.src(project);
 }
 
 function writeBundles() {
-  return build.dest();
+  return buildCLI.dest();
 }
+
+export { main as default };
diff --git a/lib/resources/tasks/build.ts b/lib/resources/tasks/build.ts
@@ -1,12 +1,13 @@
 import * as gulp from 'gulp';
+import {CLIOptions, build as buildCLI} from 'aurelia-cli';
 import transpile from './transpile';
 import processMarkup from './process-markup';
 import processCSS from './process-css';
 import copyFiles from './copy-files';
-import {build} from 'aurelia-cli';
+import watch from './watch';
 import * as project from '../aurelia.json';
 
-export default gulp.series(
+let build = gulp.series(
   readProjectConfiguration,
   gulp.parallel(
     transpile,
@@ -17,10 +18,23 @@ export default gulp.series(
   writeBundles
 );
 
+let main;
+
+if (CLIOptions.taskName() === "build" && CLIOptions.hasFlag("watch")) {
+  main = gulp.series(
+    build,
+    (done) => { watch(); done(); }
+  );
+} else {
+  main = build;
+}
+
 function readProjectConfiguration() {
-  return build.src(project);
+  return buildCLI.src(project);
 }
 
 function writeBundles() {
-  return build.dest();
+  return buildCLI.dest();
 }
+
+export { main as default };
diff --git a/lib/resources/tasks/run.js b/lib/resources/tasks/run.js
@@ -1,22 +1,10 @@
 import gulp from 'gulp';
 import browserSync from 'browser-sync';
 import historyApiFallback from 'connect-history-api-fallback/lib';
+import {CLIOptions} from 'aurelia-cli';
 import project from '../aurelia.json';
 import build from './build';
-import {CLIOptions} from 'aurelia-cli';
-
-function log(message) {
-  console.log(message); //eslint-disable-line no-console
-}
-
-function onChange(path) {
-  log(`File Changed: ${path}`);
-}
-
-function reload(done) {
-  browserSync.reload();
-  done();
-}
+import watch from './watch';
 
 let serve = gulp.series(
   build,
@@ -33,7 +21,7 @@ let serve = gulp.series(
           next();
         }]
       }
-    }, function(err, bs) {
+    }, function (err, bs) {
       if (err) return done(err);
       let urls = bs.options.get('urls').toJS();
       log(`Application Available At: ${urls.local}`);
@@ -43,34 +31,24 @@ let serve = gulp.series(
   }
 );
 
-let refresh = gulp.series(
-  build,
-  reload
-);
-
-let watch = function(refreshCb, onChangeCb) {
-  return function(done) {
-    gulp.watch(project.transpiler.source, refreshCb).on('change', onChangeCb);
-    gulp.watch(project.markupProcessor.source, refreshCb).on('change', onChangeCb);
-    gulp.watch(project.cssProcessor.source, refreshCb).on('change', onChangeCb);
+function log(message) {
+  console.log(message); //eslint-disable-line no-console
+}
 
-    //see if there are static files to be watched
-    if (typeof project.build.copyFiles === 'object') {
-      const files = Object.keys(project.build.copyFiles);
-      gulp.watch(files, refreshCb).on('change', onChangeCb);
-    }
-  };
-};
+function reload() {
+  log("Refreshing the browser");
+  browserSync.reload();
+}
 
 let run;
 
 if (CLIOptions.hasFlag('watch')) {
   run = gulp.series(
     serve,
-    watch(refresh, onChange)
+    done => { watch(reload); done(); }
   );
 } else {
   run = serve;
 }
 
-export { run as default, watch };
+export default run;
diff --git a/lib/resources/tasks/run.ts b/lib/resources/tasks/run.ts
@@ -1,18 +1,10 @@
 import * as gulp from 'gulp';
 import * as browserSync from 'browser-sync';
 import * as historyApiFallback from 'connect-history-api-fallback/lib';
+import {CLIOptions} from 'aurelia-cli';
 import * as project from '../aurelia.json';
 import build from './build';
-import {CLIOptions} from 'aurelia-cli';
-
-function onChange(path) {
-  console.log(`File Changed: ${path}`);
-}
-
-function reload(done) {
-  browserSync.reload();
-  done();
-}
+import watch from './watch';
 
 let serve = gulp.series(
   build,
@@ -32,42 +24,31 @@ let serve = gulp.series(
     }, function (err, bs) {
       if (err) return done(err);
       let urls = bs.options.get('urls').toJS();
-      console.log(`Application Available At: ${urls.local}`);
-      console.log(`BrowserSync Available At: ${urls.ui}`);
+      log(`Application Available At: ${urls.local}`);
+      log(`BrowserSync Available At: ${urls.ui}`);
       done();
     });
   }
 );
 
-let refresh = gulp.series(
-  build,
-  reload
-);
-
-let watch = function(refreshCb, onChangeCb) {
-  return function(done) {
-    gulp.watch(project.transpiler.source, refreshCb).on('change', onChangeCb);
-    gulp.watch(project.markupProcessor.source, refreshCb).on('change', onChangeCb);
-    gulp.watch(project.cssProcessor.source, refreshCb).on('change', onChangeCb);
+function log(message) {
+  console.log(message);
+}
 
-    //see if there are static files to be watched
-    if (typeof project.build.copyFiles === 'object') {
-      const files = Object.keys(project.build.copyFiles);
-      gulp.watch(files, refreshCb).on('change', onChangeCb);
-    }
-  };
-};
+function reload() {
+  log("Refreshing the browser");
+  browserSync.reload();
+}
 
 let run;
 
 if (CLIOptions.hasFlag('watch')) {
   run = gulp.series(
     serve,
-    watch(refresh, onChange)
+    done => { watch(reload); done(); }
   );
 } else {
   run = serve;
 }
 
-export { run as default, watch };
-
+export default run;
diff --git a/lib/resources/tasks/test.js b/lib/resources/tasks/test.js
@@ -2,39 +2,32 @@ import gulp from 'gulp';
 import {Server as Karma} from 'karma';
 import {CLIOptions} from 'aurelia-cli';
 import build from './build';
-import {watch} from './run';
+import watch from './watch';
 import * as path from 'path';
 
+let serve = gulp.series(
+  build,
+  done => {
+    new Karma({
+      configFile: path.join(__dirname, '/../../karma.conf.js'),
+      singleRun: !CLIOptions.hasFlag('watch')
+    }, done).start();
+  }
+);
+
 function log(message) {
   console.log(message); //eslint-disable-line no-console
 }
 
-function onChange(path) {
-  log(`File Changed: ${path}`);
-}
-
-let karma = done => {
-  new Karma({
-    configFile: path.join(__dirname, '/../../karma.conf.js'),
-    singleRun: !CLIOptions.hasFlag('watch')
-  }, done).start();
-};
-
 let unit;
 
 if (CLIOptions.hasFlag('watch')) {
-  unit = gulp.series(
-    build,
-    gulp.parallel(
-      watch(build, onChange),
-      karma
-    )
+  unit = gulp.parallel(
+    serve,
+    done => { watch(); done(); }
   );
 } else {
-  unit = gulp.series(
-    build,
-    karma
-  );
+  unit = serve;
 }
 
-export default unit;
+export { unit as default };