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

[avrahamcool]

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.

[avrahamcool]

Thank you for your detailed answer.
I was hoping for the CLI team to add it so it will be available out of the box.

[avrahamcool]

This implementation has a problem if you try to run run --watch, because internally it will call build and the flag --watch will be set there.
and it will be stuck in the build command (because of the watch) and will never procced to the serve.

a quick fix will be to set a different flag for watch in build.
or change the condition in the build file to check if its a build command,or a run command.

[zamotany]

You'r right, but better fix will be to add export when defining buildTask and import {buildTask as build} from './build'; in run.js.

In build.js:

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

and in run.js:

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

[MisterGoodcat]

I was also looking for this feature for similar reasons (custom host/serve process used during development) when I stumbled upon this issue and #240.

While it's possible to use "au run" as a workaround, or modify the build task like @zamotany suggests, I second adding this as a built-in feature to the cli. It's not uncommon to have this scenario, in particular in enterprise environments where apps have to fit in existing infrastructure. And there's really no reason to force every developer looking for this feature to implement it themselves when it's seemingly easy to provide out of the box.

Other than that, great work on the cli; it makes development much more comfortable - thanks for that!

[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 :)

[jmvtrinidad]

For several issues that I encounter using @zamotany code, I replaced some of imports with this

import * as gulp from 'gulp';
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 * as project from '../aurelia.json';
import {CLIOptions} from 'aurelia-cli';