Gulp 4, ES6 gulpfile example

gulpfile.babel.js

// Gulp module imports
import {src, dest, watch, parallel, series} from 'gulp';
import del from 'del';
import livereload from 'gulp-livereload';
import sass from 'gulp-sass';
import minifycss from 'gulp-minify-css';
import jade from 'gulp-jade';
import gulpif from 'gulp-if';
import babel from 'gulp-babel';
import yargs from 'yargs';



// Build Directories
// ----
const dirs = {
  src: 'src',
  dest: 'build'
};



// File Sources
// ----
const sources = {
  styles: `${dirs.src}/**/*.scss`,
  views: `${dirs.src}/**/*.jade`,
  scripts: `${dirs.src}/**/*.js`
};



// Recognise `--production` argument
const argv = yargs.argv;
const production = !!argv.production;



// Main Tasks
// ----

// Styles 
export const buildStyles = () => src(sources.styles)
  .pipe(sass.sync().on('error', sass.logError))
  .pipe(gulpif(production, minifycss()))
  .pipe(dest(dirs.dest))
  .pipe(livereload());

// Views
export const buildViews = () => src(sources.views)
  .pipe(jade())
  .pipe(dest(dirs.dest))
  .pipe(livereload());


// Scripts
export const buildScripts = () => src(sources.scripts)
  .pipe(babel({ presets: ['es2015'] }))
  .pipe(dest(dirs.dest))
  .pipe(livereload());


// Clean
export const clean = () => del(['build']);



// Watch Task
export const devWatch = () => {
  livereload.listen();
  watch(sources.styles, buildStyles);
  watch(sources.views, buildViews);
  watch(sources.scripts, buildScripts);
};


// Development Task
export const dev = series(clean, parallel(buildStyles, buildViews, buildScripts), devWatch);

// Serve Task
export const build = series(clean, parallel(buildStyles, buildViews, buildScripts));

// Default task
export default dev;

I'm curious how you avoid hanging with the Did you forget to signal async completion? message.
Is it always ending with livereload(), del(), or watch(), that does the trick?
Or related to using babel?
For reference see https://stackoverflow.com/a/36899424/4376643 .

Thank you very much for this script sample.