Autopload of generated files doesn't work in new gulp config, why?

Question

phpstorm

In general, the new gulpfile.js config

let preprocessor = 'sass', // Preprocessor (sass, less, styl); 'sass' also work with the Scss syntax in blocks/ folder.
    fileswatch   = 'html,htm,txt,json,md,woff2,svg' // List of files extensions for watching & hard reload

const { src, dest, parallel, series, watch } = require('gulp')
const browserSync  = require('browser-sync').create()
const bssi         = require('browsersync-ssi')
const ssi          = require('ssi')
const webpack      = require('webpack-stream')
const sass         = require('gulp-sass')
const sassglob     = require('gulp-sass-glob')
const stylglob     = require("gulp-empty")
const cleancss     = require('gulp-clean-css')
const autoprefixer = require('gulp-autoprefixer')
const rename       = require('gulp-rename')
const newer        = require('gulp-newer')
const sourcemaps   = require('gulp-sourcemaps')
const svgSprite    = require('gulp-svg-sprite')
const del          = require('del');

function svgsprite() {
  return src('assets/svg/*.svg') // svg files for sprite
  .pipe(svgSprite({
      mode: {
        stack: {
          sprite: "../sprite.svg"  //sprite file name
        }
      },
    }
  ))
  .pipe(dest('assets'));
}
function browsersync() {
  browserSync.init({
        proxy: "site.ru/",
    notify: false,		
        reloadDelay: 1500,
  })
}
function scripts() {
  return src(['assets/js/*.js', '!assets/js/*.min.js'])
    .pipe(webpack({
      mode: 'production',
      module: {
        rules: [
          {
            test: /\.(js)$/,
            exclude: /(node_modules)/,
            loader: 'babel-loader',
            query: {
              presets: ['@babel/env'],
              plugins: ['babel-plugin-root-import']
            }
          }
        ]
      }
    })).on('error', function handleError() {
      this.emit('end')
    })
    .pipe(rename('app.min.js'))
    .pipe(dest('assets/js'))
    .pipe(browserSync.stream())
}

function styles() {
  return src([`assets/styles/sass/*.sass`, `!assets/styles/sass/_*.sass`])
    .pipe(sourcemaps.init())
    .pipe(eval(`sassglob`)())
    .pipe(eval(preprocessor)())
    .pipe(autoprefixer({ overrideBrowserslist: ['last 10 versions'], grid: true }))
    .pipe(cleancss({ level: { 1: { specialComments: 0 } },/* format: 'beautify' */ }))
    .pipe(rename({ suffix: ".min" }))
    .pipe(sourcemaps.write(''))
    .pipe(dest('assets/css'))
    .pipe(browserSync.stream())
}

function startwatch() {
  watch(`assets/styles/sass/**/*.sass`, { usePolling: true }, styles)
  watch(['assets/js/**/*.js', '!assets/js/**/*.min.js'], { usePolling: true }, scripts)
  watch('assets/svg/*.svg}', { usePolling: true }, svgSprite)
  watch(`core/elements/**/*.tpl`, { usePolling: true }).on('change', browserSync.reload)
}
exports.svgSprite = svgSprite
exports.scripts = scripts
exports.styles  = styles
exports.assets  = series(scripts, styles, )
exports.default = series(scripts, styles, svgsprite, parallel(browsersync, startwatch))

autoupload for generated css files does not work in it in phpstorm. It only works when you click on the tabs. In versions 2020 2019 2018.
and here is the old code

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    browserSync = require('browser-sync'),
    cleancss = require('gulp-clean-css'),
    rename = require('gulp-rename'),
    autoprefixer = require('gulp-autoprefixer'),
    notify = require('gulp-notify'),
  svgSprite = require('gulp-svg-sprite'),
    sourcemaps = require('gulp-sourcemaps');
// Local Server
gulp.task('browser-sync', function () {
    browserSync.init({
        proxy: "site.ru",
    https: true,
        reloadDelay: 1000,
        notify: false
    });
});

gulp.task('svgSprite', function () {
  return gulp.src('assets/svg/*.svg') // svg files for sprite
    .pipe(svgSprite({
        mode: {
          stack: {
            sprite: "../sprite.svg"  //sprite file name
          }
        },
      }
    ))
    .pipe(gulp.dest('assets'));
});
// Sass|Scss Styles
gulp.task('styles', function () {
    return gulp.src('assets/sass/**/*.sass')
        .pipe(sourcemaps.init())
        .pipe(sass({outputStyle: 'expanded'}).on("error", notify.onError()))
        .pipe(rename({suffix: '.min', prefix: ''}))
        .pipe(autoprefixer(['last 15 versions']))
        .pipe(cleancss({level: {1: {specialComments: 0}}})) // Opt., comment out when debugging
        .pipe(sourcemaps.write(''))
        .pipe(gulp.dest('assets/css'))
        .pipe(browserSync.reload({stream: true}))
});
// HTML Live Reload
gulp.task('code', function () {
    return gulp.src('assets/*.html')
        .pipe(browserSync.reload({stream: true}))
});
gulp.task('watch', function () {
    gulp.watch('assets/sass/**/*.sass', gulp.parallel('styles'));
  gulp.watch('assets/svg/**/*.svg', gulp.parallel('svgSprite'));
    gulp.watch('core/elements/**/*.tpl').on('change', browserSync.reload)

});
gulp.task('default', gulp.parallel('styles', 'svgSprite', 'browser-sync', 'watch'));

everything works here and there is no need to click on the tabs

Both configs based on optimizedHtml from WebDesignMaster