Apply --depth flag to --tasks-json flag output

[phated]

In 1.2.0, @sttk added a --depth flag to gulp-cli; However, we didn't apply it to the --tasks-json flag to reduce the exponential growth as described in gulpjs/gulp#1033

@sttk If you or anyone else would like to expand on the functionality you added for --depth and apply it to --tasks-json, that would be super helpful.

[sttk]

@phated I'm willing to tackle this also, but I have a question.

There are cases that --depth cuts child tasks of series/parallel tasks. Are the json data of such series/parallel tasks useful?

I think --tasks-json should be able to output in two type forms, a full tree and a tree until first child tasks which are not series/parallel tasks. And the latter form would be possible if gulp-cli can get branch flags in undertaker.

[sttk]

However, it may be better that --tasks and --tasks-json can output same trees by --depth. How do you think about my idea below?

(default or --depth=full)
[07:09:11] ├─┬ task0
[07:09:11] │ └─┬ <series>
[07:09:11] │   ├─┬ <parallel>
[07:09:11] │   │ ├── func1
[07:09:11] │   │ └── func2
[07:09:11] │   └── func3
[07:09:11] └─┬ task1
[07:09:11]   └─┬ <series>
[07:09:11]     └─┬ task0
[07:09:11]       └─┬ <series>
[07:09:11]         ├─┬ <parallel>
[07:09:11]         │ ├── func1
[07:09:11]         │ └── func2
[07:09:11]         └── func3

(--depth=3)
[07:10:10] ├─┬ task0
[07:10:10] │ └─┬ <series>
[07:10:10] │   ├── <parallel>
[07:10:10] │   └── func3
[07:10:10] └─┬ task1
[07:10:10]   └─┬ <series>
[07:10:10]     └── task0

(--depth=4)
[07:11:37] ├─┬ task0
[07:11:37] │ └─┬ <series>
[07:11:37] │   ├─┬ <parallel>
[07:11:37] │   │ ├── func1
[07:11:37] │   │ └── func2
[07:11:37] │   └── func3
[07:11:37] └─┬ task1
[07:11:37]   └─┬ <series>
[07:11:37]     └─┬ task0
[07:11:37]       └── <series>

(--depth=nonrecursive, or another name. I didn't find an appropriate name.) 
[07:11:37] ├─┬ task0
[07:11:37] │ └─┬ <series>
[07:11:37] │   ├─┬ <parallel>
[07:11:37] │   │ ├── func1
[07:11:37] │   │ └── func2
[07:11:37] │   └── func3
[07:11:37] └─┬ task1
[07:11:37]   └─┬ <series>
[07:11:37]     └── task0

[phated]

@sttk thanks for working on this. All the information I have is at gulpjs/gulp#1033 - I'll cc @segrey here to give more insights on how he needs this to be for IDE integration. Thanks again.

[sttk]

First, I've modified that --tasks-json outputs same trees as current --tasks using --depth flag.

sttk/gulp-cli#modify_for_tasks_json

Modifications:

• copyTree was separated from logTasks except sorting tasks and node creations.
• changed the processing for --tasks-json in each index.js of the versions to use copyTree and to support --depth flag.
• added tests for copyTree.
• added a test case to taskTree.js. This case shoud have been added at the time of the modification for --tasks.

[sttk]

In addition, I've added modifications to support --depth=nonrecursive.

sttk/gulp-cli#modify_for_tasks_json_norcr

But this program identifies series/parallel tasks by their labels <series> or <parallel> tentatively. For this I want to modify undertaker to include branch flags in its task tree output. Can I do it?

[phated]

@sttk at first thought, that should be fine.

[segrey]

@sttk thanks for working on this. Seems --depth=nonrecursive does exactly what's needed. As for naming, maybe --depth=compact?

[sttk]

Thank you for replies.

@phated Please tell me problems you think about my second thought above.

@segrey I've changed the naming of --depth=nonrecursive to --depth=compact.

[phated]

@sttk does it make sense to just make everything non-recursive and change the color or use some other indicator (maybe @tylersticka could help us brainstorm that design). There are a few issues, including #1410 and #1033, that mention this problem. Also, I don't really like making a numerical flag take some other value.

[tylersticka]

Boy, this is a tough problem to solve! I'm using @phated's example from the other issue as a point of reference.

I initially took @phated's suggestion and tried playing with color, but the issue is that if you have two gulp.series or gulp.parallel groups one right after the other, there's no way to differentiate where one group stops and the other ends. Also, the child tasks end up kind of overpowering anything else... I really like the look of cool colors like cyan and purple for task names and such, but they are overthrown easily by any warmer colors in the palette.

My next experiment was a play with what @sttk recommended. The only changes are that I like parentheses more than less-than/greater-than signs (there are already so many hard angles in this output), and I started playing with different box-drawing characters to differentiate parallel tasks from series:

[18:08:06] └─┬ combined      Build all the things!
[18:08:06]   │ --dev         …un-minified
[18:08:06]   │ --production  …compressed into single bundle
[18:08:06]   ├── clean
[18:08:06]   ├─╥ (parallel)
[18:08:06]   │ ╟── js
[18:08:06]   │ ╟── css
[18:08:06]   │ ╙── img
[18:08:06]   └─┬ (series)
[18:08:06]     ├── some
[18:08:06]     ├── other
[18:08:06]     └─╥ (parallel)
[18:08:06]       ╟── thing
[18:08:06]       ╙── stuff

This works fine, though I'm not sure the different drawing characters are communicating very much... the headings say everything on their own, really.

Then I wondered if maybe I could eliminate those (parallel) and (series) headings entirely, retaining the indentation and pushing the parallel line characters further:

[18:08:06] └─┬ combined      Build all the things!
[18:08:06]   │ --dev         …un-minified
[18:08:06]   │ --production  …compressed into single bundle
[18:08:06]   ├── clean
[18:08:06]   ╞═╦══ js
[18:08:06]   │ ╠══ css
[18:08:06]   │ ╚══ img
[18:08:06]   └─┬── some
[18:08:06]     ├── other
[18:08:06]     ╘═╦══ thing
[18:08:06]       ╚══ stuff

I like the way this looks more, but it may be harder to read... I can't tell if it's clear what the series versus parallel groupings are. Would love to get some more opinions.

[phated]

It's not too clear what the parallel and series tasks are. Maybe (series) or (parallel) could come after the top level task name? e.g. build (series)