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 10, 2017 · ae1c81a · ae1c81a
1 parent 3d94cc9
commit ae1c81a
Show file tree

Hide file tree

Showing 14 changed files with 317 additions and 98 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
@@ -117,7 +117,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'),
@@ -147,12 +148,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.json b/lib/dependencies.json
@@ -18,6 +18,7 @@
   "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",
@@ -34,6 +35,7 @@
   "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.json b/lib/resources/tasks/build.json
@@ -6,6 +6,11 @@
       "name": "env",
       "description": "Sets the build environment.",
       "type": "string"
+    },
+    {
+      "name": "watch",
+      "description": "Watches source files for changes and refreshes the bundles automatically.",
+      "type": "boolean"
     }
   ]
 }
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,17 +2,9 @@ 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';
 
-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'),
@@ -26,7 +18,7 @@ if (CLIOptions.hasFlag('watch')) {
   unit = gulp.series(
     build,
     gulp.parallel(
-      watch(build, onChange),
+      done => { watch(); done(); },
       karma
     )
   );
@@ -37,4 +29,4 @@ if (CLIOptions.hasFlag('watch')) {
   );
 }
 
-export default unit;
+export { unit as default };
diff --git a/lib/resources/tasks/test.ts b/lib/resources/tasks/test.ts
@@ -2,17 +2,9 @@ import * as 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';
 
-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'),
@@ -26,7 +18,7 @@ if (CLIOptions.hasFlag('watch')) {
   unit = gulp.series(
     build,
     gulp.parallel(
-      watch(build, onChange),
+      done => { watch(); done(); },
       karma
     )
   );
@@ -37,4 +29,4 @@ if (CLIOptions.hasFlag('watch')) {
   );
 }
 
-export default unit;
+export { unit as default };
diff --git a/lib/resources/tasks/transpile.ts b/lib/resources/tasks/transpile.ts
@@ -22,7 +22,7 @@ var typescriptCompiler = typescriptCompiler || null;
 
 function buildTypeScript() {
   typescriptCompiler = ts.createProject('tsconfig.json', {
-    "typescript": require('typescript')
+    typescript: require('typescript')
   });
 
   let dts = gulp.src(project.transpiler.dtsSource);