Gulp v.4 CSS Inject Using BrowserSync not Working

Question

I have a local server setup using Valet +. I have gulp v.4 setup with a gulpfile.js (see below) and I am trying to perform a watch function which creates a css inject as a default task. The sass compiling task works when the watch task triggers a change in the scss files, but the browser does not inject the css unless I reload the browser manually. I am not sure if it is an issue with valet+, my gulpfile setup or the browser. Please help.

I have tried several different gulpfile formats for gulp v.4. I have tried a different browser. I have tried the browsersync init function globally and locally inside the watch task and nothing works.

"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;

I expect the css to inject and not require a manual browser reload when I make a change in scss files. Actual results are the scss files compile into css properly, but are not injected via my watch and browsersync tasks.