使用BrowserSync的Gulp v.4 CSS注入不起作用

Question

我使用Valet +安装了本地服务器。我使用gulpfile.js设置了gulp v.4（请参见下文），并且尝试执行watch函数，该函数创建css注入作为默认任务。当监视任务触发scss文件中的更改时，sass编译任务起作用，但是除非我手动重新加载浏览器，否则浏览器不会注入css。我不确定valet +，gulpfile设置或浏览器是否有问题。请帮忙。

我为gulp v.4尝试了几种不同的gulpfile格式。我尝试了其他浏览器。我已经在watch任务中全局和局部尝试了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;

当我对scss文件进行更改时，我希望CSS能够注入并且不需要手动重新加载浏览器。实际结果是将scss文件正确编译为css，但不会通过我的watch和browsersync任务注入。