Gulp v.4 CSS Inject с использованием BrowserSync не работает

Question

У меня есть настройки локального сервера с использованием Valet +. У меня есть gulp v.4 setup с gulpfile.js (см. Ниже), и я пытаюсь выполнить функцию наблюдения, которая создает инъекцию CSS в качестве задачи по умолчанию. Задача компиляции sass работает, когда задача наблюдения вызывает изменение в файлах scss, но браузер не вводит css, пока я не перезагружу браузер вручную. Я не уверен, что это проблема с valet+, моей настройкой gulpfile или браузером. Пожалуйста помоги.

Я пробовал несколько разных форматов gulpfile для gulp v.4. Я пробовал другой браузер. Я попробовал функцию инициализации browsersync глобально и локально внутри задачи наблюдения, и ничего не работает.

"use strict";

// ------------------------------------------------- load plugins
const gulp         = require('gulp'),
      // svgSprite     = require('gulp-svg-sprite'),
      // imagemin      = require('gulp-imagemin'),
      rename       = require('gulp-rename'),
      uglify       = require('gulp-uglify'),
      autoprefixer = require('autoprefixer'),
      browserSync  = require('browser-sync').create(),
      sourcemaps   = require('gulp-sourcemaps'),
      cssnano      = require('cssnano'),
      del          = require('del'),
      plumber      = require('gulp-plumber'),
      postcss      = require('gulp-postcss'),
      sass         = require('gulp-sass');

// ------------------------------------------------- vars for site and browserSync
const siteName = 'gatesinsurance-wp',
      userName = 'evanmarshall';

// ------------------------------------------------- configs
const paths = {
  svg: {
    src: './src/images/icons/',
    dest: './build/assets/images/sprites/',
    glob: '**/*.svg',
    config: {
      "log": "debug",
      "shape": {
        "dimensions": {
          "maxWidth": 200,
          "maxHeight": 200
        },
      },
      "mode": {
        "css": {
          render: {
            scss: {
              dest: "/src/styles/modules/_sprite.scss",
              template: "./gulpfile.js/templates/sprite.scss"
            }
          }
        },
      },
      "variables": {}
    }
  },
  styles: {
    src: './src/styles/**/*.scss',
    dest: './build/themes/gatesinsurance/assets/styles',
    opts: {

    }
  },
  images: {
    src: './src/images/**/*',
    dest: './build/themes/gatesinsurance/assets/images',
    opts: {

    }
  },
  scripts: {
    src: './src/scripts/**/*.js',
    dest: './build/themes/gatesinsurance/assets/scripts',
    opts: {

    }
  },
  assets: './build/themes/gatesinsurance/assets',
  php: './build/themes/gatesinsurance/**/*.php'
};

// ------------------------------------------------- clean fxn
function clean() {
  return del(paths.assets)
}

// ------------------------------------------------- scripts fxn
function scripts() {
  // body omitted
}

// ------------------------------------------------- styles fxn
function styles() {
  return gulp
    .src(paths.styles.src)
    .pipe(sourcemaps.init())
    .pipe(sass({
      outputStyle: 'expanded'
    }))
    .on("error", sass.logError)
    .pipe(gulp.dest(paths.styles.dest))
    .pipe(rename({
      suffix: '.min'
    }))
    .pipe(postcss([
      autoprefixer(), cssnano()
    ]))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(paths.styles.dest))
    // .pipe(browserSync.stream());
}

// ------------------------------------------------- browserSync reload fxn
function reload(done) {
  browserSync.reload();
  done();
}

// ------------------------------------------------- browserSync fxn
function serve(done) {
  browserSync.init({
    proxy: 'http://' + siteName + '.test',
    host: siteName + '.test',
    open: 'external',
    port: 8000,
    http: {
      key:
          '/Users/' +
          userName +
          '/.valet/Certificates/' +
          siteName +
          '.test.key',
      cert:
          '/Users/' +
          userName +
          '/.valet/Certificates/' +
          siteName +
          '.test.crt'
    }
  });
  done();
}

// ------------------------------------------------- watch fxn
function watchFiles() {
  gulp.watch(paths.styles.src, {events: 'change'}, styles);
  gulp.watch(paths.php, {events: 'change'}, reload);
  // gulp.watch(paths.scripts.src, {events: 'change'}, gulp.series(scripts, reload));
}

// ------------------------------------------------- define complex fxn
const build = gulp.series(clean, styles),
      watch = gulp.parallel(watchFiles, serve);

// ------------------------------------------------- export fxn
exports.styles  = styles;
exports.scripts = scripts;
exports.clean   = clean;
exports.build   = build;
exports.watch   = watch;
exports.default = build;

Я ожидаю, что CSS введет и не потребует перезагрузки браузера вручную, когда я внесу изменения в файлы scss. Фактические результаты - это то, что файлы scss правильно компилируются в css, но не внедряются через мои задачи watch и browsersync.