Combining Gulp tasks in v-4 with wrapping it up?

Question

I am currently using Gulp v4. The problem is that clean dist and wrapping task are not automatically working.

/* CLEAN
// empty dist folder
gulp.task('clean', require('del').bind(null, ['dist/*']));

//watch 

gulp.task('watch', gulp.parallel('browserSync', 'sass', 'useref', 'imagemin', 'fonts', function() {
  gulp.watch('app/sass/**/*.scss', gulp.series('sass'));
  gulp.watch('app/*.html').on('change', browserSync.reload);;
}));

/* DEFAULT
/------------------------*/
// default gulp tasks executed with `gulp
gulp.task('default', ['clean', 'css', 'javascript', 'images']);

Answer 1

You can use gulp.series to combine tasks (https://gulpjs.com/docs/en/api/series).

function clean() {
  return del(['dist']);
}

function scss() {
  return gulp.src('./src/**/*.scss')
    .pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))
    .pipe(concat('app.css'))
    .pipe(gulp.dest('./dist'));
}

function build(done) {
  gulp.series(
    clean,
    scss,
  )(done);
}

function serve(done) {
  browserSync.init({
    server: {
      baseDir: './dist',
    },
  });

  done();
}

function reload(done) {
  browserSync.reload();
  done();
}

function run(done) {
  gulp.series(
    build,
    serve,
    watchers,
  )(done);
}

function reload(done) {
  browserSync.reload();
  done();
}

function watchers() {
  gulp.watch('./src/**/*.scss', gulp.series(scss, reload));
  // ... other watchers here
}

gulp.task('build', build);
gulp.task('default', run);