Gulp 4: How do I prevent from duplicated dependent task execution?

[gary5]

I have a configuration file of gulp 3.

var gulp = require('gulp');

gulp.task('0', function(done) {
    console.log('0');
    done();
});

gulp.task('1', ['0'], function(done) {
    setTimeout(function() {
        console.log('1');
        done();
    }, 1000);
});

gulp.task('2', ['0'], function(done) {
    setTimeout(function() {
        console.log('2');
        done();
    }, 200);
});

gulp.task('default', ['1', '2'], function(done) {
    console.log('default');
    done();
});

The execution result is:

[13:59:36] Starting '0'...
0
[13:59:36] Finished '0' after 138 μs
[13:59:36] Starting '1'...
[13:59:36] Starting '2'...
2
[13:59:36] Finished '2' after 201 ms
1
[13:59:37] Finished '1' after 1 s
[13:59:37] Starting 'default'...
default
[13:59:37] Finished 'default' after 82 μs

After migrating it to gulp 4 version.

var gulp = require('gulp');

gulp.task('0', function(done) {
    console.log('0');
    done();
});

gulp.task('1', gulp.series('0', function(done) {
    setTimeout(function() {
        console.log('1');
        done();
    }, 1000);
}));

gulp.task('2', gulp.series('0', function(done) {
    setTimeout(function() {
        console.log('2');
        done();
    }, 200);
}));

gulp.task('default', gulp.series('1', '2', function(done) {
    console.log('default');
    done();
}));

The task 0 has been executed twice.

[13:59:10] Starting 'default'...
[13:59:10] Starting '1'...
[13:59:10] Starting '0'...
0
[13:59:10] Finished '0' after 687 μs
[13:59:10] Starting '<anonymous>'...
1
[13:59:11] Finished '<anonymous>' after 1 s
[13:59:11] Finished '1' after 1.01 s
[13:59:11] Starting '2'...
[13:59:11] Starting '0'...
0
[13:59:11] Finished '0' after 604 μs
[13:59:11] Starting '<anonymous>'...
2
[13:59:11] Finished '<anonymous>' after 202 ms
[13:59:11] Finished '2' after 205 ms
[13:59:11] Starting '<anonymous>'...
default
[13:59:11] Finished '<anonymous>' after 720 μs
[13:59:11] Finished 'default' after 1.22 s

I need gulp.series to keep dependencies in sequence, but I can't find any information to prevent duplicated execution.

[codekirei]

In my understanding, Gulp 4 is encouraging named logic functions. You call said functions from gulp.task instead of writing logic inside an anonymous function in gulp.task. There are a lot of benefits to this approach.

Here's a quick example based on your sample code:

var gulp = require('gulp')

function task0(done) {
  console.log(0)
  done()
}

function task1(done) {
  setTimeout(function() {
    console.log(1)
    done()
  }, 1000)
}

function task2(done) {
  setTimeout(function() {
    console.log(2)
    done()
  }, 2000)
}

function def(done) {
  console.log('default')
  done()
}

gulp.task('0', task0)
gulp.task('1', gulp.series(task0, task1))
gulp.task('2', gulp.series(task0, task2))
gulp.task('default', gulp.series(
  task0,
  gulp.parallel(task1, task2),
  def
))

[00:05:16] Starting 'default'...
[00:05:16] Starting '0'...
0
[00:05:16] Finished '0' after 1.67 ms
[00:05:16] Starting 'parallel'...
[00:05:16] Starting 'task1'...
[00:05:16] Starting 'task2'...
1
[00:05:17] Finished 'task1' after 1 s
2
[00:05:18] Finished 'task2' after 2 s
[00:05:18] Finished 'parallel' after 2 s
[00:05:18] Starting 'def'...
default
[00:05:18] Finished 'def' after 699 μs
[00:05:18] Finished 'default' after 2.01 s

0 is only called once. Note the lack of <anonymous> as well. Hope that helps!

EDIT just noticed your gulp.task('2', ... has a 200 timeout, and I used 2000. Oops! I think my example still illustrates the concept, though, so I'm leaving it.

[phated]

@codekirei is correct about this. Gulp 3 required you to register every function you wanted to access and then you used strings to represent those tasks. In gulp 4, we wanted to move towards a functional, composition-based architecture so you can create named or anonymous functions and reuse them in the gulp.series/gulp.parallel methods. This allows you to create completely independent dependency chains, e.g. you might want to have a clean task at the beginning of your default task but not when running a css task directly. We believe this flexibility is worth the extra verbosity.

You could also use a module I created called async-once if you want to keep the gulpfile in the original post, but I don't recommend it because it doesn't work with returning streams, etc.

[gary5]

Thank you @codekirei and @phated.
Just one more question. Gulp 4 doesn't have 'dependency' concept?

[codekirei]

Probably not in the sense that you're thinking of.

Gulp 3 used orchestrator to compose tasks, while Gulp 4 has switched to undertaker. Undertaker does not have orchestrator's concept of dependencies baked into its API.

In Gulp 4, dependency is achieved through standard JS control flow techniques (i.e. in your logic functions) or undertaker's series method. So the functionality is still there, you just have to approach it a bit differently.

[gary5]

I think I got it. Thank you @codekirei !

[codekirei]

Great! You're welcome 😁

[Finesse]

It brings us a task hell. Additionally to our usual bunch of tasks we have to make a task for every combination of the tasks.

[phated]

It brings us a task hell. Additionally to our usual bunch of tasks we have to make a task for every combination of the tasks.

You are obviously missing something fundamental. Much of this will be addressed in the documentation updates we are working on.