Почему содержимое сайта не меняется автоматически после изменения файла css на gulp?

Обучаюсь работе с gulp, написал эту программу:

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

gulp.task('sass', function(){
    return gulp.src('app/sass/**/*.sass')
    .pipe(sass())
    .pipe(gulp.dest('app/css'))
});

gulp.task('watch', function() {
    gulp.watch('app/sass/**/*.sass',gulp.parallel('sass'));
  });

Она фиксирует изменения в файлах sass и добавляет их в файл css. Потом я немного дополнил ее:

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

gulp.task('sass', function(){
    return gulp.src('app/sass/**/*.sass')
    .pipe(sass())
    .pipe(gulp.dest('app/css'))
    .pipe(browserSync.reload({stream: true}))
});
gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir:'app'
        },
        notify: false 
    });
});
gulp.task('watch', gulp.parallel('browser-sync', 'sass'), function() {
    gulp.watch('app/sass/**/*.sass',gulp.parallel('sass'));
  });

Она должна открывать browser-sync (успешно с этим справляется) и динамически отображать изменения в нем. Но теперь файл css не изменяется при изменении файла sass, также если изменить файл css, браузер все равно не будет отображать изменения. Возможно проблема в версии. У меня 4 версия, но обучаюсь я по урокам для 3 версии