Gulp does not automatically check for sass and browser sync. What to do?

Question

Frontend

Good day. I'm just getting started with gulp and ran into a problem in using it. The task runs, but there is no automatic page refresh and compilation from sass to css.

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


gulp.task('server', function() {

    browserSync.init({
        server: {
            baseDir: "source/"
        }
    });
}); 

gulp.task('sass', function() {
    return gulp.src("source/sass/**/*.sass")
        .pipe(sass())
        .pipe(gulp.dest("source/css"))
        .pipe(browserSync.stream());

        gulp.watch("source/sass/*.sass", ['sass']);
    				gulp.watch("source/*.html").on('change', browserSync.reload);
});

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

I will be glad to any help and criticism.

Answer 1

Try this, it should help:

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


function gulpSass() {
  return gulp
    .src('source/sass/**/*.sass')
    .pipe(gulp.dest('source/css'))
    .pipe(browsersync.stream())
}


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


function watchFiles(done) {
  gulp.watch('source/sass/**/*.sass', gulp.parallel(gulpSass));
  gulp.watch('source/css/**/*.css', reload);
  gulp.watch('source/js/**/*.js', reload);
  gulp.watch('*.html', reload);
  done();
}

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


exports.watch = watch;

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