How to trigger dependant task after gulp watch - gulp

Question

I've been trying to figure out how to trigger a dependant task after a task which uses gulp-watch. I guess I'm doing something bad here. So, what I want to do is to transpile whole project (+ watch the changes) and after that's done I want to trigger a bundling task that is dependant on this one. Since task of transpiling has watching included, I can't put it as dependant task, but I need a way to know when whole transpiling has been done, to do the initial bundling and on each change I want to do the bundle again.
How to do this?
This is how the transpilation task looks like:
gulp.task('babel', () => {
return gulp.src(babelSrc)
.pipe(watch(babelSrc, () => console.log('watch'))
.pipe(babel({...}))
.pipe(gulp.dest('build'));
});
Callback passed to watch will console log watch everytime a file has been transpiled, which I can use only after to trigger bundling task only after initial transpilation of the whole project has been done.

Answer 1

what I want to do is to transpile whole project [...] and after that's done I want to trigger a bundling task
That's not possible the way you're doing it now. When you .pipe() the gulp-watch plugin it prevents the stream from emitting the 'end' and 'finish' events. So there's no way to know when the initial babel compilation has finished.
You need to separate the initial compilation from the watch.
That way you can listen for the 'end' event and trigger your dependent task from there.
gulp.task('dependend-task', () => {
...
});
function babelStream(stream) {
return stream
.pipe(babel({...}))
.pipe(gulp.dest('build'))
.on('end', () => gulp.start('dependend-task'));
}
gulp.task('babel', () => {
watch(babelSrc, {ignoreIntial:true, read:false}, function(file) {
return babelStream(gulp.src(file.path));
});
return babelStream(gulp.src(babelSrc));
});