Помощь в создании Gulp-сборки?

Буду благодарен за помощь, поскольку сам я ещё новичок в этом деле.

Есть следующие плагины: browser-sync, gulp-sass, gulp-autoprefixer.

И следующая файловая структура.

• dist
  
• src
  
  • css
    
  • fonts
    
  • img
    
  • js
    
  • sass
    
    • blocks
      
    • style.sass
      
      
    
    
  • index.html
    
  
  

Нужно настроить gulpfile.js так, чтобы при вызове таска "gulp" запускался browser-sync и отслеживал изменения в index.html, во всех js-файлах и во всех sass-файлах, компилируя последние в css-файл, автоматически расставляя вендорные префиксы и отображая изменения в реальном времени.

А при запуске "gulp dist" все папки и файлы (кроме папки sass и её содержимого) переносились в папу dist.

Вот мой gulpfile.js, подскажите, где и что я делаю не так?

let gulp         = require('gulp'),
    browserSync  = require('browser-sync').create(),
    sass         = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer')

gulp.task('sass', function(done) {
    gulp.src("src/sass/**/*.sass || scss")
    .pipe(sass())
    .pipe(gulp.dest("scr/css"))
    .pipe(browserSync.stream());
    done();
});

gulp.task('serve', function(done) {

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

    gulp.watch("scr/sass/**/*.sass || scss", gulp.series('sass'));
    gulp.watch("scr/*.html").on('change', () => {
      browserSync.reload();
      done();
  });
    done();
});

gulp.task('dist', function(done) {
    gulp.src('src/**/*.html, .css, .js')
    .pipe(gulp.dest('dist/'))
});

gulp.task('default', gulp.series('sass', 'serve'));
gulp.task('dist', gulp.('dist'));