Gulp: Browsersync перезагружает браузеры ПОСЛЕ выполнения задачи "перезагрузка"

Question

Мой вопрос внешне похож на этот, но настолько отличается, что ответ там не поможет моей конкретной ситуации.

Вот мой gulpfile:

const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const postcss = require('gulp-postcss');
const tailwindcss = require('tailwindcss');
const nested = require('postcss-nested');
const concat = require('gulp-concat');
const minify = require('gulp-minify');
const rename = require("gulp-rename");
const autoprefixer = require('autoprefixer');
const cssnano = require('gulp-cssnano');
const nunjucksRender = require('gulp-nunjucks-render');
const data = require('gulp-data');

const cssSource = './src/css/styles.pcss';
const cssDest = './dist/css/';

const jsSource = [
  './src/js/headroom.min.js',
  './src/js/tiny-slider.js',
  './src/js/shoestring.min.js',
  './src/js/main.js'
];
const jsDest = './dist/js/';

gulp.task('nunjucks', () => {
  return gulp.src('pages/**/*.+(html|nunjucks)')
    .pipe(data(() => {
      return require('./site-config.json')
    }))
    .pipe(nunjucksRender({
      path: ['templates']
    }))
    .pipe(gulp.dest('./'))
});

gulp.task('postCSS', () => {

  var processors = [
    autoprefixer,
    nested,
  ];

  return gulp.src(cssSource)
    .pipe(postcss(processors))
    .pipe(rename(function (path) {
      path.extname = ".css"
    }))
    .pipe(postcss([
      tailwindcss('./tailwind.js'),
      autoprefixer({
        browsers: [
          ">0.25%",
          "not ie 11",
          "not op_mini all"
        ],
        open: false
      })
    ]))
    // .pipe(purify(['./index.html', 'pages/**/*.html']))
    .pipe(cssnano())
    .pipe(gulp.dest(cssDest));
});

gulp.task('scripts', () => {
  return gulp.src(jsSource)
    .pipe(concat('main.js'))
    .pipe(gulp.dest(jsDest))
});

gulp.task("reload", (done) => { 
  browserSync.reload(); done(); 
});

gulp.task('browser-sync', () => {
  browserSync.init({
    server: true,
    open: false,
    online: true
  });
  gulp.watch('**/*.nunjucks', gulp.series('nunjucks', 'reload'));
  gulp.watch(cssSource, gulp.series('postCSS', 'reload'));
  gulp.watch('tailwind.js', gulp.series('postCSS', 'reload'));
  gulp.watch(jsSource, gulp.series('scripts', 'reload'));
});

gulp.task('default', gulp.series('nunjucks', 'postCSS', 'scripts', 'browser-sync'));

Когда я сохраняю любые файлы, которые просматривает Browsersync, gulp.series запускает и запускает соответствующие задачи, включая reload функция. Но после того, как он выполняет эти две задачи (например, postCSS а также reload), мой терминал указывает, что браузер Reloading Browsers... снова. Эта задача никогда не кажется завершенной.

Я перепробовал множество вещей (некоторые слишком умные, чтобы повторять их здесь), чтобы избавиться от этой последней, казалось бы, бесконечной задачи перезагрузки, но тщетно. Google подвел меня до сих пор. Я пробовал по одному заданию по одному, но каждое заканчивается одинаково: Reloading Browsers... выход.

Вот мой соответствующий вывод консоли для моего postCSS задача, например:

[18:15:48] Starting 'postCSS'...
[18:15:50] Finished 'postCSS' after 1.32 s
[18:15:50] Starting 'reload'...
[18:15:50] Finished 'reload' after 652 μs
[Browsersync] Reloading Browsers...

Странная вещь, это ничего не вешает. Кроме вывода на консоль, похоже, что что-то не так. Мои браузеры просто перезагружаются, и я могу заниматься своими веселыми делами.

На самом деле я просто надеюсь узнать немного больше о том, как работает новая система выполнения задач Gulp 4. Я чувствую, что где-то есть очевидная ошибка, но не знаю, где.

Как я уже сказал, не чрезвычайная ситуация, так как все "работает" просто отлично. Просто надеюсь выяснить, чего мне не хватает.

Может ли кто-нибудь указать мне правильное направление?