[Feature Request] 'watch' option for the 'build' task

I’m submitting a feature request It will be helpfull if we could use watch also in the build command. (currently available only for run)

• Library Version: v0.17.0

• Operating System: Windows 10

• Node Version: v4.4.7

• NPM Version: 3.8.9

• Browser: all

• Language: all

Current behavior: we can’t use the watch option in the build command. so changes in the code don’t reflect back to the app.

Expected/desired behavior:

• What is the expected behavior? allow the watch option also for the build command, thus allowing the developer to choose how to serve his app, while gaining the benefits of synchronization between the code and the app. the watch should behave just like it does in the run command. (listen to changes in the code, and rebundle the affected files). [the developer will need to manualy refresh the app in the browser to see the changes, because browserSync will not be active]
• What is the motivation / use case for changing the behavior? the motivation behind this request is that we already have a server who takes care of serving the app. this server also server a webApi on the same address as the web project. so we need to be able to build our code in such a way that let us choose our own methode of serving the app, while actively listening to the changes in the code.

FYI: as a workaround, we are currently using run --watch, so the app is served by the aurelia-cli with watch on his default port, and then we also serve the same app with our server on our port. but we really could use an option to build with watch without serve.

[zamotany]

It’s a recuring theme here. aurelia-cli when executing tasks, searches for them in aurelia_project/tasks, so you can tailor them for your own needs. Those task are just simple gulp task. For example to add --watch option to build command replace build.js with this:

import gulp from 'gulp';
import transpile from './transpile';
import processMarkup from './process-markup';
import processCSS from './process-css';
import {build} from 'aurelia-cli';
import project from '../aurelia.json';
import {CLIOptions} from 'aurelia-cli';

function readProjectConfiguration() {
  return build.src(project);
}

function writeBundles() {
  return build.dest();
}

function onChange(path) {
  console.log(`File Changed: ${path}`);
}

export let buildTask = gulp.series(
  readProjectConfiguration,
  gulp.parallel(
    transpile,
    processMarkup,
    processCSS
  ),
  writeBundles
);

let watch = function() {
  gulp.watch(project.transpiler.source, buildTask).on('change', onChange);
  gulp.watch(project.markupProcessor.source, buildTask).on('change', onChange);
  gulp.watch(project.cssProcessor.source, buildTask).on('change', onChange)
}

let task;

if (CLIOptions.hasFlag('watch')) {
  task = gulp.series(
    buildTask,
    watch
  );
} else {
  task = buildTask;
}

export default task;

and in run.js replace

import build from './build';

with:

import {buildTask as build} from './build';

Actually, you don’t event have to know gulp, just look how other task are done, take some code snippets from them and join them together. The code above is just run.js with build.js combined together.

[AStoker]

@avrahamcool, could you do me a favor and add “[Feature Request]” to the beginning of this issue? It would help with organizing the issues for us 😃