Gulp 4 and BrowserSync reload?

Question

gulp.js

Good afternoon!
Before the 4th gallp, this code worked, now there was no time to delve into the question in detail, what has changed there, the only thing I understood is that square brackets have changed to function parameters.
BUT ... It annoys me that browserSync.reload stopped working in the sass task, there is no reload after changing the sass file.
On the toaster, one colleague already asked about this, he was helped by the creation of a separate reload function. How to set up browserSync reload html, js in Gulp 4?
This thing did not help me, or I did not understand how to stick it in my case.
Help me deal with this demonic thing.

var gulp       	 = require('gulp');
var sass       	 = require('gulp-sass');
var browserSync 	 = require('browser-sync').create();
var autoprefixer 	 = require('gulp-autoprefixer');
var plumber 		 = require('gulp-plumber');

gulp.task('browser-sync', function() { 
    browserSync.init({
        server: {
            baseDir: './out' 
        },
        notify: false 
    });
  browserSync.watch('out/').on('change', browserSync.reload); 
});	

gulp.task('sass', function(){ 
    return gulp.src('app/scss/*.scss') 
  .pipe(plumber({
    errorHandler : function(err) {
      console.log(err);
      this.emit('end');
    }
  }))
    
  .pipe(sass({errLogToConsole: true}))
  .pipe(sass({outputStyle: 'compact'}))
  .pipe(autoprefixer({
    browsers: ['last 4 versions'],
    cascade: false
  }))
   .pipe(gulp.dest('out/assets/css')) 
   .pipe(browserSync.reload({stream: true})) 
});

gulp.task('watch', gulp.series('sass', 'browser-sync'), function() {
    gulp.watch('app/**/*.*', gulp.series('sass'));
});

Answer 1

var gulp       	 = require('gulp');
var sass       	 = require('gulp-sass');
var browserSync 	 = require('browser-sync').create();
var autoprefixer 	 = require('gulp-autoprefixer');
var plumber 		 = require('gulp-plumber');

gulp.task('browser-sync', function(done) { 
  browserSync.init({
    server: {
      baseDir: './out'
    },
    notify: false
  });
  
  browserSync.watch('out/').on('change', browserSync.reload);
  
  done()
});	

gulp.task('sass', function(done){
  gulp.src('app/scss/*.scss')
    .pipe(plumber({
      errorHandler : function(err) {
        console.log(err);
        this.emit('end');
      }
    }))
    .pipe(sass({errLogToConsole: true}))
    .pipe(sass({outputStyle: 'compact'}))
    .pipe(autoprefixer({
      browsers: ['last 4 versions'],
      cascade: false
    }))
   .pipe(gulp.dest('out/assets/css'))
   .pipe(browserSync.reload({stream: true}));
  
  done()
});

gulp.task('watch', gulp.series('sass', 'browser-sync', function(done) {
  gulp.watch('app/**/*.*', gulp.series('sass'));
  
  done()
}));

Answer 2

The simplest working example for gulp 4: https://medium.com/swlh/setting-up-gulp-4-0-2-for-... The
example is much simpler than Minimal BrowserSync setup with Gulp 4