gulpで自動コンパイルをしたく、色々試したのですが上手くいきませんでした...

前提・実現したいこと

元々gulp3で動いていたファイルを使っていたのですが、M1 MacBookに変更したこともありバージョンを上げて（Node.jsも一緒に）gulp4に変更したところ上手くいかなくなりました。

そこで調べたところ記述方法が大きく変更されたことを知り、
自分なりに修正したところ一応gulp自体は起動しました。

しかし、セーブ時に自動コンパイルはされずgulpを都度起動しなければコンパイルされなくなりました。

こちら解決のご協力いただけますと大変幸いです。

※大変恐縮なのですがjsかなり弱いです。使用していたのもテンプレートです。
※情報が不足しておりましたら申し訳ございません。

gulpfile.js

変更前

var gulp = require('gulp');
var plumber = require('gulp-plumber');
var minimist = require('minimist');
var ejs = require('gulp-ejs');
var htmlmin = require('gulp-htmlmin');
var sass = require('gulp-sass');
var sassGlob = require('gulp-sass-glob');
var autoprefixer = require('gulp-autoprefixer');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var del = require("del");
var svgo = require('gulp-svgo');
var browserSync = require('browser-sync');
var runSequence = require('run-sequence');

gulp.task('default', ['template', 'style', 'script'], () => {
  console.log('compiled');
});

gulp.task('build', ['clean'], (cb) => {
  return runSequence(
    ['template', 'style', 'script', 'image'],
    cb
  );
});

gulp.task('release', (cb) => {
  return runSequence(
    'build',
    'publicClean',
    'publicCopy',
    cb
  );
});

gulp.task('publicClean', () => {
  return del(['public']);
});

gulp.task('publicCopy', () => {
  return gulp.src('./dist/**/*')
    .pipe(gulp.dest('./public'))
});


//生成しないために記載
gulp.task('publicReshape', () => {
  return del([
    'public/index.html'
  ]);
});

gulp.task('template', () => {
  return gulp.src('./src/**/*.html')
    .pipe(plumber())
    .pipe(ejs({
      ext: '.html'
    }))
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest('./dist'))
});

gulp.task('style', () => {
  return gulp.src('src/**/*.scss')
    .pipe(plumber())
    .pipe(sassGlob())
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
    .pipe(autoprefixer({
      browsers: ['last 2 versions', 'ie 11', 'android 4'],
      cascade: false
    }))
    .pipe(gulp.dest('./dist'));
});

gulp.task('clean', (cb) => {
  return del(['dist'], cb);
});

gulp.task('script', () => {
  return gulp.src(['./src/**/*.js'])
    .pipe(plumber())
    // @todo フォルダ毎にjsをまとめる
    // .pipe(concat('script.min.js'))
    // .pipe(uglify())
    .pipe(gulp.dest('./dist'))
});

gulp.task('svg-optimize', () => {
  return gulp.src('./src/**/*.svg')
    .pipe(svgo())
    .pipe(gulp.dest('./dist'))
})

gulp.task('image', ['svg-optimize'], () => {
  return gulp.src('./src/**/*.+(jpg|png|gif|svg|ico|pdf|mp4)')
    .pipe(gulp.dest('./dist'))
});

gulp.task('browser-sync', () => {
  return browserSync({
    server: {
      baseDir: './dist/'
    },
    open: 'external',
  });
});

gulp.task('watch', ['template', 'style', 'script', 'image', 'browser-sync'], () => {
  gulp.watch(['./src/**/*.ejs', './src/**/*.html'], ['template']);
  gulp.watch('./src/**/*.scss', ['style']);
  gulp.watch('./src/**/*.js', ['script']);
  gulp.watch('./src/**/*.+(jpg|png|gif|svg|ico|pdf|mp4)', ['image']);
  gulp.watch(['./dist/**/*.html', './dist/**/*.css', './dist/**/*.js', './dist/**/*.+(jpg|png|gif|svg|ico|pdf|mp4)'], function() {
    browserSync.reload();
  });
});

変更後

var gulp = require('gulp');
var plumber = require('gulp-plumber');
var minimist = require('minimist');
var ejs = require('gulp-ejs');
var htmlmin = require('gulp-htmlmin');
var sass = require('gulp-sass')(require('sass'));
var sassGlob = require('gulp-sass-glob');
var autoprefixer = require('gulp-autoprefixer');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var del = require("del");
var svgo = require('gulp-svgo');
var browserSync = require('browser-sync');
var runSequence = require('run-sequence');

gulp.task('build', gulp.task('clean'), (cb) => {
  return runSequence(
    ['template', 'style', 'script', 'image'],
    cb
  );
});

gulp.task('release', (cb) => {
  return runSequence(
    'build',
    'publicClean',
    'publicCopy',
    cb
  );
});

gulp.task('publicClean', () => {
  return del(['public']);
});

gulp.task('publicCopy', () => {
  return gulp.src('./dist/**/*')
    .pipe(gulp.dest('./public'))
});

//生成しないために記載
gulp.task('publicReshape', () => {
  return del([
    'public/index.html'
  ]);
});

gulp.task('template', () => {
  return gulp.src('./src/**/*.html')
    .pipe(plumber())
    .pipe(ejs({
      ext: '.html'
    }))
    .pipe(htmlmin({
      collapseWhitespace: true
    }))
    .pipe(gulp.dest('./dist'))
});

gulp.task('style', () => {
  return gulp.src('src/**/*.scss')
    .pipe(plumber())
    .pipe(sassGlob())
    .pipe(sass({
      outputStyle: 'compressed'
    }).on('error', sass.logError))
    .pipe(autoprefixer({
      browsers: ['last 2 versions', 'ie 11', 'android 4'],
      cascade: false
    }))
    .pipe(gulp.dest('./dist'));
});

gulp.task('clean', (done) => {
  return del(['dist'], );
});

gulp.task('script', () => {
  return gulp.src(['./src/**/*.js'])
    .pipe(plumber())
    // @todo フォルダ毎にjsをまとめる
    // .pipe(concat('script.min.js'))
    // .pipe(uglify())
    .pipe(gulp.dest('./dist'))
});

gulp.task('svg-optimize', () => {
  return gulp.src('./src/**/*.svg')
    .pipe(svgo())
    .pipe(gulp.dest('./dist'))
})

gulp.task('image', gulp.task('svg-optimize'), () => {
  return gulp.src('./src/**/*.+(jpg|png|gif|svg|ico)')
    .pipe(gulp.dest('./dist'))
});

gulp.task('browser-sync', () => {
  return browserSync({
    server: {
      baseDir: './dist/'
    },
    open: 'external',
  });
});

gulp.task('default', gulp.parallel('template', 'style', 'script'), () => {
  console.log('compiled');
});

gulp.task('watch', gulp.parallel('template', 'style', 'script', 'image', 'browser-sync'), () => {
  gulp.watch(gulp.parallel('./src/**/*.ejs', './src/**/*.html'), gulp.task('template'));
  gulp.watch('./src/**/*.scss', gulp.task('style'));
  gulp.watch('./src/**/*.js', gulp.task('script'));
  gulp.watch('./src/**/*.+(jpg|png|gif|svg|ico)', gulp.task('image'));
  gulp.watch(gulp.parallel('./dist/**/*.html', './dist/**/*.css', './dist/**/*.js', './dist/**/*.+(jpg|png|gif|svg|ico)'), function () {
    browserSync.reload();
  });
});

ターミナル

xxxxx src % npm start

> site@0.0.1 start
> gulp watch

[12:19:32] Using gulpfile ~/Desktop/test/src/gulpfile.js
[12:19:32] Starting 'watch'...
[12:19:32] Starting 'template'...
[12:19:32] Starting 'style'...
[12:19:32] Starting 'script'...
[12:19:32] Starting 'image'...
[12:19:32] Starting 'browser-sync'...
[Browsersync] Access URLs:
 -------------------------------------
       Local: http://xxxxx
    External: http://xxxxx
 -------------------------------------
          UI: http://xxxxx
 UI External: http://xxxxx
 -------------------------------------
[Browsersync] Serving files from: ./dist/
[12:19:33] Finished 'script' after 329 ms
[12:19:33] Finished 'template' after 329 ms
[12:19:33] Finished 'style' after 390 ms
[12:19:33] Finished 'image' after 395 ms