When changing the gulp assembly - browserSync died, what could be the problem?

Question

gulp.js

Decided to split the
Gulp file into a new implementation

const config = require("./gulpSetting/config.json");
const gulp = require("gulp");
// Модули
const { HTMLpage } = require('./HTMLmodule.js');
const { CSSpage } = require('./CSSmodule.js');
const { JSpage } = require('./JSmodule.js');
// Сервер
const browserSync = require("browser-sync").create();
const router = {
  "/404": `${config.onlinePath}/pages/404/index.html`,
  "/*": `${config.onlinePath}/pages/404/index.html`,
  "/": `${config.onlinePath}/pages/main/index.html`,
};
function server() {
  browserSync.init({
    logConnections: true,
    server: {
      baseDir: `${config.serverPath}`,
      index: `/${config.onlinePath}/pages/main/index.html`,
      routes: router,
    },
    ghostMode: false,
    callbacks: {
      ready: function (err, bs) {
        bs.addMiddleware("*", function (req, res) {
          res.writeHead(302, {
            location: `/${config.onlinePath}/pages/404/index.html`,
          });
          res.end("Redirecting!");
        });
      },
    },
  });
}
//TODO BUILD
function online(cd) {
  HTMLpage();
  CSSpage();
  JSpage();
  server();
  gulp.watch(
    [
      `${config.mainPath}/components/**/*.html`,
      `${config.mainPath}/pages/**/*.html`
    ]).on('change',browserSync.reload);
  // gulp.watch(
  // 	[
  // 		`${config.mainPath}/component/**/*.scss`,
  // 		`${config.mainPath}/pages/**/*.scss`,
  // 	],
  // 	gulp.series(CSSpage,browserSync.stream())
  // ),
  // gulp.watch(
  // 	[
  // 		`${config.mainPath}/component/**/*.js`,
  // 		`${config.mainPath}/pages/**/*.js`,
  // 	],
  // 	gulp.series(JSpage,browserSync.stream())
  // );
}
exports.watch = online;

I have already tried different implementations, everything hangs on
Reloading Browsers...
(reload / stream)

Previously, reloading was right in the 1st task
Example:

return gulp
    .src(
      `${config.mainPath}/pages/**/*.html`
    )
    .pipe(include())
    .pipe(gulp.dest(`${config.onlinePath}/pages/`))	
    .pipe(browserSync.stream())

When splitting into files, this had to be taken out.
What are the possible solutions, what could be the problem?

Answer 1

I didn’t really understand what it was about, but maybe named instances will help you https://browsersync.io/docs/api#api-get
Create an instance with any name in the main file, get it in separate task files.