Gulp 4, browsersync, how to make it work?

Question

gulp.js

Guys. help with gulp 4, I encountered gulp for the first time and could not get browsersync to work. In this code
, gulp 3 information is outdated almost everywhere

const gulp        = require('gulp');
const sass        = require('gulp-sass');
const sourcemaps  = require('gulp-sourcemaps');
const watch       = require('gulp-watch');


gulp.task('sass-compile', function () {
  return gulp.src('./scss/**/*.scss')
  .pipe(sourcemaps.init())
  .pipe(sass().on('error', sass.logError))
  .pipe(sourcemaps.write('./'))
  .pipe(gulp.dest('./css/'));
})


gulp.task('watch', function(){
  gulp.watch('./scss/**/*.scss',gulp.series('sass-compile'));
});

Answer 1

So try with Gulp4:

const
  gulp          = require('gulp'),
  sass          = require('gulp-sass'),
  sourcemaps    = require('gulp-sourcemaps');
  browsersync   = require("browser-sync").create(),


function gulpSass() {
  return gulp
    .src('./scss/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./css'))
    .pipe(browsersync.stream())
}


function browserSync(done) {
  browsersync.init({
    injectChanges: true,
    server: {
      baseDir: "./"
    },
    port: 3000,
    notify: false
  });
  done();
}


function watchFiles(done) {
  gulp.watch('./scss/**/*.scss', gulp.parallel(gulpSass));
  done();
}

const watch = gulp.parallel(watchFiles, browserSync);


exports.watch = watch;

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

Just install browsersync , without it nothing will work)