Why are Gulp 4 build files no longer tracked?

Question

npm

Good afternoon. After adding some tasks, the assembly stopped updating when changing files. Removing the added tasks had no effect. The assembly itself starts, but, as I understand it, Gulp watch does not work for some reason. I will be grateful for any help.

'use strict';

const { src, dest, parallel, series, watch } = require('gulp');
const browserSync = require('browser-sync').create();
const concat = require('gulp-concat');
const uglify = require('gulp-uglify-es').default;
const sass = require('gulp-sass');
const sourcemap = require('gulp-sourcemaps');
const autoprefixer = require('gulp-autoprefixer');
const imagemin = require('gulp-imagemin');
const newer = require('gulp-newer'); // TODO: удалить за ненадобностью
const del = require('del');
const pug = require('gulp-pug');
const plumber = require('gulp-plumber');
const ttf2woff = require('gulp-ttf2woff');
const ttf2woff2 = require('gulp-ttf2woff2');
const svgSprite = require('gulp-svg-sprite');

function fClean() {
  return del('build/**/*');
}

function fFonts() {
  src('src/fonts/*.ttf')
    .pipe(ttf2woff())
    .pipe(dest('build/fonts/'));
  return src('src/fonts/*.ttf')
    .pipe(ttf2woff2())
    .pipe(dest('build/fonts/'))
    .pipe(browserSync.stream());
}

function fPug() {
  return src('src/pug/pages/*.pug')
    .pipe(plumber())
    .pipe(pug({
      pretty: true
    }))
    .pipe(dest('build'))
    .pipe(browserSync.stream());
}

function fImagesCopy() {
  return src('src/images/**/*.{png,jpg,jpeg}')
    .pipe(dest('build/images/'));
}

function fSVGSprites() {
  return src('src/images/icon-*.svg')
    .pipe(svgSprite({
      mode: {
        stack: {
          sprite: "../sprite.svg"
        }
      }
    }))
    .pipe(dest('build/images/'));
}

function fStyles() {
  return src('src/sass/main.scss')
    .pipe(plumber())
    .pipe(sourcemap.init())
    .pipe(sass({
      outputStyle: 'expanded'
    }))
    .pipe(concat('styles.css'))
    .pipe(autoprefixer({
      overrideBrowserslist: [
        'last 4 versions',
        'not dead',
        'not ie <= 11'
      ],
      grid: true
    }))
    .pipe(sourcemap.write('.'))
    .pipe(dest('build/styles/'))
    .pipe(browserSync.stream());
}

function fScripts() {
  return src([
    'src/scripts/jquery-1.12.4.min.js',
    'src/scripts/jquery-migrate-1.2.1.min.js',
    'src/scripts/scripts.js'
  ])
    .pipe(plumber())
    .pipe(concat('scripts.min.js'))
    .pipe(uglify())
    .pipe(dest('build/scripts/'))
    .pipe(browserSync.stream());
}

function fBrowserSync() {
  browserSync.init({
    server: { baseDir: 'build/' },
    notify: false,
    online: true,
    cors: true
  })
}

function fStartWatch() {
  watch('src/sass/**/*.scss', fStyles);
  watch('src/scripts/*.js', fScripts);
  watch('src/pug/**/*.pug', fPug);
  watch('src/images/**/*.{png,jpg,jpeg}', fImagesCopy);
  watch('src/fonts/**/*.ttf', fFonts);
  watch('src/images/icon-*.svg', fSVGSprites);
}

exports.browsersync = fBrowserSync;
exports.scripts = fScripts;
exports.scriptsBuild = fScriptsBuild;
exports.styles = fStyles;
exports.stylesBuild = fStylesBuild;
exports.images = fImagesCopy;
exports.imagesBuild = fImagesBuild;
exports.clean = fClean;
exports.html = fPug;
exports.fonts = fFonts;

exports.default = series(fClean, parallel(fPug, fScripts, fFonts, fImagesCopy, fSVGSprites), fStyles, fBrowserSync, fStartWatch);

function fStylesBuild() {
  return src('src/sass/main.scss')
    .pipe(plumber())
    .pipe(sass({
      outputStyle: 'expanded'
    }))
    .pipe(concat('styles.css'))
    .pipe(autoprefixer({
      overrideBrowserslist: [
        'last 4 versions',
        'not dead',
        'not ie <= 11'
      ],
      grid: true
    }))
    .pipe(dest('build/styles/'));
}

function fScriptsBuild() {
  return src([
    'src/scripts/jquery-1.12.4.min.js',
    'src/scripts/jquery-migrate-1.2.1.min.js',
    'src/scripts/scripts.js'
  ])
    .pipe(plumber())
    .pipe(concat('scripts.min.js'))
    .pipe(uglify())
    .pipe(dest('build/scripts/'));
}

function fImagesBuild() {
  return src('src/images/**/*.{png,jpg,jpeg}')
    .pipe(imagemin([
      imagemin.optipng({optimizationLevel: 3}),
      imagemin.mozjpeg({progressive: true}),
      imagemin.svgo()
    ]))
    .pipe(dest('build/images/'));
}

exports.build = series(fClean, parallel(fPug, fScriptsBuild, fFonts, fImagesBuild, fSVGSprites), fStylesBuild);

Answer 1

Tasks fBrowserSyncand fStartWatchshould sort of run in parallel.
In this case, they are launched sequentially, and since the task fBrowserSyncdoes not complete, the task fStartWatchdoes not start.