Why doesn't the compiler and browsersync work?

Question

gulp.js

I can’t make both the compiler and the sync browser work together. What’s the matter?

const gulp = require('gulp');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const watch = require('gulp-watch');
const browserSync = require('browser-sync').create();

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

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

    gulp.watch("app/scss/*.scss", gulp.series('sass-compile'));
    gulp.watch("app/*.html").on('change', browserSync.reload);
});

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/')) 
    .pipe(browserSync.stream());
});

gulp.task('default', browserSync );