Browsersync not reloading since updating to gulp-sass 5.0

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;