Почему Browser-sync зависает при изменении кода?

Question

[Александр]

Добрый день.
Изучаю возможности gulp, для более автоматизированной верстки и столкнулся с проблемой.
Есть вот такой gulpfile.js:

Полный файл

const gulp = require('gulp');
const plumber = require('gulp-plumber');
const notify = require('gulp-notify');
const sass = require('gulp-sass')(require('sass'));
const postcss = require('gulp-postcss');
const csso = require('postcss-csso');
const postcssUrl = require('postcss-url');
const postcssImport = require('postcss-import');
const postScss = require('postcss-scss');
const autoprefixer = require('autoprefixer');
const sync = require('browser-sync').create();
const htmlmin = require('gulp-htmlmin');
const squoosh = require('gulp-libsquoosh');
const terser = require('gulp-terser');
const rename = require('gulp-rename');
const webp = require('gulp-webp');
const svgSprite = require('gulp-svg-sprite');
const del = require('del');

// Styles

const styles = () => {
  return gulp
    .src('source/sass/*.scss', { sourcemaps: true })
    .pipe(plumber())
    .pipe(postcss([postcssImport(), postcssUrl()], { syntax: postScss }))
    .pipe(sass())
    .pipe(postcss([autoprefixer(), csso()]))
    .pipe(
      rename({
        extname: '.min.css',
      }),
    )
    .pipe(gulp.dest('build/css', { sourcemaps: '.' }))
    .pipe(sync.stream());
};

exports.styles = styles;

// HTML

const html = () => {
  return gulp
    .src('source/*.html')
    .pipe(htmlmin({ collapseWhitespace: true }))
    .pipe(gulp.dest('build'));
};

exports.html = html;

// Scripts

const scripts = () => {
  return gulp
    .src('source/js/*.js')
    .pipe(terser())
    .pipe(
      rename({
        extname: '.min.js',
      }),
    )
    .pipe(gulp.dest('build/js'))
    .pipe(sync.stream());
};

exports.scripts = scripts;

// Images

const optimizeImages = () => {
  return gulp.src('source/img/**/*.{png,jpg}').pipe(squoosh()).pipe(gulp.dest('build/img'));
};

exports.optimizeImages = optimizeImages;

const copyImages = () => {
  return gulp.src('source/img/**/*.{png,jpg}').pipe(gulp.dest('build/img'));
};

exports.images = copyImages;

// WebP

const createWebp = () => {
  return gulp
    .src('source/img/**/*.{jpg,png}')
    .pipe(webp({ quality: 90 }))
    .pipe(gulp.dest('build/img'));
};

exports.createWebp = createWebp;

// Sprite

const sprite = () => {
  return gulp
    .src('source/icons/*.svg')
    .pipe(
      svgSprite({
        mode: {
          stack: {
            sprite: '../sprite.svg',
          },
        },
      }),
    )
    .pipe(gulp.dest('build/icons'));
};

exports.sprite = sprite;

// Copy

const copy = (done) => {
  gulp
    .src(
      [
        'source/fonts/*.{woff2,woff}',
        'source/*.ico',
        'source/img/**/*.svg',
        'source/favicons/*',
      ],
      {
        base: 'source',
      },
    )
    .pipe(gulp.dest('build'));
  done();
};

exports.copy = copy;

// Clean

const clean = () => {
  return del('build');
};

exports.clean = clean;

// Server

const server = (done) => {
  sync.init({
    server: {
      baseDir: 'build',
    },
    cors: true,
    notify: false,
    ui: false,
  });
  done();
};

exports.server = server;

// Reload

const reload = (done) => {
  sync.reload();
  done();
};

// Watcher

const watcher = () => {
  gulp.watch('source/sass/**/*.scss', styles);
  gulp.watch('source/js/*.js', gulp.series(scripts, reload));
  gulp.watch('source/*.html', gulp.series(html, reload));
  gulp.watch('source/icons/**/*.svg', gulp.series(sprite, reload));
};

// Build

const build = gulp.series(clean, copy, optimizeImages, gulp.parallel(styles, html, scripts, sprite, createWebp));

exports.build = build;

// Default

exports.default = gulp.series(
  clean,
  copy,
  copyImages,
  gulp.parallel(styles, html, createWebp, scripts),
  gulp.series(server, watcher),
);

Вырезка styles, server, watcher, default

// Styles

const styles = () => {
  return gulp
    .src('source/sass/*.scss', { sourcemaps: true })
    .pipe(plumber())
    .pipe(postcss([postcssImport(), postcssUrl()], { syntax: postScss }))
    .pipe(sass())
    .pipe(postcss([autoprefixer(), csso()]))
    .pipe(
      rename({
        extname: '.min.css',
      }),
    )
    .pipe(gulp.dest('build/css', { sourcemaps: '.' }))
    .pipe(sync.stream());
};

exports.styles = styles;

// Server

const server = (done) => {
  sync.init({
    server: {
      baseDir: 'build',
    },
    cors: true,
    notify: false,
    ui: false,
  });
  done();
};

exports.server = server;

// Watcher

const watcher = () => {
  gulp.watch('source/sass/**/*.scss', styles);
  gulp.watch('source/js/*.js', gulp.series(scripts, reload));
  gulp.watch('source/*.html', gulp.series(html, reload));
  gulp.watch('source/icons/**/*.svg', gulp.series(sprite, reload));
};

// Default

exports.default = gulp.series(
  clean,
  copy,
  copyImages,
  gulp.parallel(styles, html, createWebp, scripts),
  gulp.series(server, watcher),
);

При запуске (npm run start) всё ок, style.min.css собирается как и положено.

Но дальше если я начинаю добавлять какое-то свойство в .scss файлы, то сервер выводит ошибку....

Скриншот ошибки

... и зависает в таком состоянии. Задачу он не заканчивает и если я продолжаю писать, то он уже заново задачу не запускает, соответственно когда я свойство до конца допишу (условно "color: red;"), он не отработает.
Приходится ручками его останавливать через Ctrl+C и запускать заново. Получается при любом изменении сервер приходится перезапускать. Подскажите, где может быть проблема?

Comments

[Александр Шипин]

Проблема может быть в самом исполнении Gulpfile.js, а если точнее, то любые ваши действия заставляют gulp отрабатывать снова и снова. То есть, вы используете watch, который смотрит, есть ли Любое изменение или нет, и если есть, то сразу пытаться внести его в "релиз", что и чревато.

Я бы использовал что-то наподобие watchify и ему подобное, так как он отрабатывает в момент сохранения файла (нажатие Ctrl + S / Cmd + S)

Пример из Typescript, но логика такая же.

var gulp = require("gulp");
var browserify = require("browserify");
var source = require("vinyl-source-stream");
var watchify = require("watchify");
var tsify = require("tsify");
var fancy_log = require("fancy-log");
var paths = {
  pages: ["src/*.html"],
};
var watchedBrowserify = watchify(
  browserify({
    basedir: ".",
    debug: true,
    entries: ["src/main.ts"],
    cache: {},
    packageCache: {},
  }).plugin(tsify)
);
gulp.task("copy-html", function () {
  return gulp.src(paths.pages).pipe(gulp.dest("dist"));
});
function bundle() {
  return watchedBrowserify
    .bundle()
    .on("error", fancy_log)
    .pipe(source("bundle.js"))
    .pipe(gulp.dest("dist"));
}
gulp.task("default", gulp.series(gulp.parallel("copy-html"), bundle));
watchedBrowserify.on("update", bundle);
watchedBrowserify.on("log", fancy_log);