Browsersync not reloading since updating to gulp-sass 5.0 - sass

Question

Browsersync not reloading after each style/gulp-sass task. The issue started since updating Gulp. Here is the Gulpfile.js. It used to work when gulp-sass has a default Sass compiler.
const sass = require('gulp-sass')(require('sass'));
const gulp = require('gulp');
const rename = require('gulp-rename');
const sourcemaps = require('gulp-sourcemaps');
const autoprefixer = require('gulp-autoprefixer');
const browserSync = require('browser-sync').create();
const webpack = require('webpack-stream');
const styleSRC = './sass/**/*.scss';
const styleDIST = './dist/css/';
// compile scss into css
function style() {
return gulp.src(styleSRC)
.pipe(sourcemaps.init())
.pipe(sass({
errorLogToConsole: true,
outputStyle: 'compressed'
}))
.pipe(autoprefixer({
cascade: false
}))
.pipe( rename({
suffix: '.min'
}))
.pipe(sourcemaps.write('.'))
.pipe( gulp.dest( styleDIST ) )
.pipe(browserSync.stream());
}
// watch for changes
function watch() {
browserSync.init({
proxy: "http://stem.local",
open: false
// do not automatically open browser
});
gulp.watch('./sass/**/*.scss', style);
gulp.watch('./**/*.php').on('change', browserSync.reload);
}
exports.style = style;
exports.watch = watch;
jspack and PHP work but not style
Thank you.

Answer 1

I was able to make it work by creating browserSync.reload function and updating watch task for styles in to series.
const gulp = require('gulp');
const rename = require('gulp-rename');
const sass = require('gulp-sass')(require('sass'));
const sourcemaps = require('gulp-sourcemaps');
const autoprefixer = require('gulp-autoprefixer');
const browserSync = require('browser-sync').create();
const webpack = require('webpack-stream');
const scriptSRC = './js/**/scripts.js';
const scriptDIST = './dist/js/';
const styleSRC = './sass/**/*.scss';
const styleDIST = './dist/css/';
// compile bundled js
function jspack() {
return gulp.src(scriptSRC)
.pipe( webpack( { mode: "development" } ) )
.pipe( rename ( { basename: "scripts-bundled", extname: ".js"} ) )
.pipe(sourcemaps.write('.'))
.pipe( gulp.dest(scriptDIST) )
.pipe(browserSync.stream());
}
// compile scss into css
function style() {
return gulp.src(styleSRC)
.pipe(sourcemaps.init())
.pipe(sass({
errorLogToConsole: true,
outputStyle: 'compressed'
}))
.pipe(autoprefixer({
cascade: false
}))
.pipe( rename({
suffix: '.min'
}))
.pipe(sourcemaps.write('.'))
.pipe( gulp.dest( styleDIST ) );
}
function browserSyncReload(done) {
browserSync.reload();
done();
}
// watch for changes
function watch() {
browserSync.init({
proxy: "http://stem.local",
open: false,
injectChanges: true
});
gulp.watch('./sass/**/*.scss', gulp.series('style', 'browserSyncReload'));
gulp.watch('./**/*.php').on('change', browserSync.reload);
gulp.watch('./js/**/*.js', jspack);
}
exports.jspack = jspack;
exports.style = style;
exports.browserSyncReload = browserSyncReload;
exports.watch = watch;