Gulp 4: Build & watch, task naming

[glen-84]

With Gulp 3, you can do something like this:

// Build.
gulp.task("build", () => {
    // ...
});

// Watch.
gulp.task("watch", ["build"], () => {
    gulp.watch("src/**/*.html", ["build"]);
});

This is a total of 2 tasks (functions), and build will be run before watch.

How do you do the same thing with Gulp 4? If you use gulp.series, it looks like this:

gulp.task("watch", gulp.series("build", function anotherFunctionOrAnonymous() {
    gulp.watch("src/**/*.html", gulp.parallel("build"));
}));

But that gives this tree:

[20:31:55] +-- watch
[20:31:55] ¦ +-- <series>
[20:31:55] ¦   +-- build
[20:31:55] ¦   +-- anotherFunctionOrAnonymous

You can name it watch as well, and then you get:

[20:36:44] +-- watch
[20:36:44] ¦ +-- <series>
[20:36:44] ¦   +-- build
[20:36:44] ¦   +-- watch

... but this almost looks recursive.

Is this the only way to do it? Would you not reintroduce the concept of dependencies?

Same thing with my serve task that depends on watch.

If you had dependencies again, it could be visualized as follows:

[20:36:44] +-- watch
[20:36:44] ¦ +-- (build)     <-- different colour

It's just a bit weird the way that it is, and I'm unsure of how to name the tasks/functions in these cases.

[beenanner]

@glen-84 what I've done in my projects is to just call the parent something generic that incapsulates all subtasks.

[20:36:44] +-- buildAndWatch
[20:36:44] ¦ +-- <series>
[20:36:44] ¦   +-- build
[20:36:44] ¦   +-- watch

[glen-84]

@beenanner Ya, I thought about doing that as well, but it doesn't really solve the root problem (task dependencies).

[phated]

@glen-84 is your example the result of a gulp --tasks command?

[glen-84]

@phated Yes.

[phated]

We are working on UI for a non-recursive display (although it won't solve you naming 2 different things the same) over in gulpjs/gulp-cli#57 so I'm closing this.