Buffered 2 events appear in gulp 3, sometimes the browser does not load changes, I want to upgrade to gulp4, how to write the code correctly so that gulp4 works?

Question

css

Buffered 2 events appear in gulp3, the browser sometimes does not load changes, I want to upgrade to gulp4, how to write the code correctly so that gulp4 works?
sometimes there are buffered 2 events, and the browser does not restart, I
update from gulp 3 to gulp 4 according to the video,
what is in the video instruction, but my code is different in structure from what is in the video,
then I have
gulp 3 code, which I now
have I am poorly oriented in JavaScript, please tell me how to correctly write the code for gulp4

Answer 1

Try

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var less = require('gulp-less');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var watch = require('gulp-watch');
var fileinclude = require('gulp-file-include');

gulp.task('styles', function() {
  return gulp.src('./app/less/main.less')
    .pipe(plumber({
      errorHandler: notify.onError(function(err) {
        return {
          title: 'Styles',
          sound: false,
          message: err.message
        }
      })
    }))
    .pipe(sourcemaps.init())
    .pipe(less())
    .pipe(autoprefixer({
      browsers: ['last 6 versions'],
      cascade: false
    }))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./app/css'))
    .pipe(browserSync.stream());
});

gulp.task('html', function() {
  return gulp.src('./app/html/*.html')
    .pipe(plumber({
      errorHandler: notify.onError(function(err) {
        return {
          title: 'HTML include',
          sound: false,
          message: err.message
        }
      })
    }))
    .pipe(fileinclude({
      prefix: '@@'
    }))
    .pipe(gulp.dest('./app/'))
});

gulp.task('server', gulp.series('styles', 'html', function() {
  browserSync.init({
    server: {
      baseDir: './app'
    }
  })

  gulp.watch(['./app/**/*.html', './app/**/*.js', './app/img/*.*']).on('change', browserSync.reload);
  gulp.watch('./app/less/**/*.less', gulp.series('styles'));
  gulp.watch('./app/html/**/*.html', gulp.series('html'));
}))

gulp.task('default', gulp.series('server'));