Почему не обновляется страница после ошибки в sass browserSync/livereload?

Question

[dmitriu256]

Почему не обновляется страница после внесения изменений стилей?
при использовании сервера BrowserSync есть интересный момент, а именно сборка отлично работает обновляются стили в файле style.css и обновляется страница в браузере, но до первой ошибки в sass файле, после внесения правок sass и дальше продолжает отлично компилироваться в style.css, но браузер уже не обновляет страницу, только приходится вручную перезагружать или перезапускать всю сборку.

Такой же момент если используем сервер liveReload - обновляет только один раз

В приоритете интересно разобраться именно с поведением BrowserSync, тк он дает больше возможностей для тестировании верстки на других устройствах online.

Код gulpfile

const {parallel, series, watch} = require('gulp');
//Минификатор html
const htmlmin = require('gulp-htmlmin');
//Размер файла
const size = require('gulp-size');
//Сервер
//const connect = require('gulp-connect');
//const livereload = require("gulp-livereload");
const browserSync = require('browser-sync').create();
///Обработчик ошибок
const plumber = require('gulp-plumber');
//Свое написание ошибок
const notify = require('gulp-notify');
//Пути
const path = require('./gulp/config/path');
const config = require('./gulp/config/config');

//gulp.series - задачи одна за другой в строгом порядке
//gulp.parallel - одновременное выполнение задач

//Подключаемые задачи
const clear = require('./gulp/tasks/clear');
const html = require('./gulp/tasks/html');
const css = require('./gulp/tasks/css');
const scss = require('./gulp/tasks/sass');
const libs = require('./gulp/tasks/libs');
const js = require('./gulp/tasks/js');
const img = require('./gulp/tasks/img');
const fonts = require('./gulp/tasks/fonts');

//Сервер BrowserSync
const server = () => {
    browserSync.init({
        server: {
            baseDir: path.root,
            notify: false //уведомления
            online: true,
        }
    });

    // connect.server({
    //     root: path.root,
    //     livereload: true,
    //     port: 3010
    // });

}

//Наблюдатели изменений
//вместо change везде было all
const watcher = () => {
    watch(path.html.watch, html).on("change", browserSync.reload);// наблюдение за html
    watch(path.css.watch, css).on("change", browserSync.reload);// наблюдение за css
    watch(path.sass.watch, scss).on("change", browserSync.reload);// наблюдение за sass
    watch(path.libs.watch, libs).on("change", browserSync.reload);// наблюдение за libs
    watch(path.js.watch, js).on("change", browserSync.reload);// наблюдение за javascript
    watch(path.img.watch, img).on("change", browserSync.reload);// наблюдение за images
    watch(path.fonts.watch, fonts).on("change", browserSync.reload);// наблюдение за шрифтами

    // watch(path.html.watch, html).on("change", livereload.changed);// наблюдение за html
    // watch(path.css.watch, css).on("change", livereload.changed);// наблюдение за css
    // watch(path.sass.watch, scss).on("change", livereload.changed);// наблюдение за sass
    // watch(path.libs.watch, libs).on("change", livereload.changed);// наблюдение за libs
    // watch(path.js.watch, js).on("change", livereload.changed);// наблюдение за javascript
    // watch(path.img.watch, img).on("change", livereload.changed);// наблюдение за images
    // watch(path.fonts.watch, fonts).on("change", livereload.changed);// наблюдение за шрифтами
}

const build = series(
    clear,
    libs,
    //parallel(html, css, js, img, fonts), // если не используем sass
    parallel(html, scss, js, img, fonts)
);

const dev = series(
    build,
    parallel(watcher, server)
);


//Tasks до разбивки на модули
exports.html = html;
exports.watcher = watcher;
exports.clear = clear;
exports.css = css;
exports.scss = scss;
exports.libs = libs;
exports.js = js;
exports.img = img;
exports.fonts = fonts;


//Сборка developer
// exports.dev = dev;
// exports.build = build;

exports.default = config.isProd ? build : dev;

Код таска html

const {src, dest} = require("gulp");

const browserSync = require('browser-sync').create();
const plumber = require("gulp-plumber");
const notify = require("gulp-notify");
const htmlmin = require("gulp-htmlmin");
const size = require("gulp-size");
//Поддержка конструкции picture source
const webpHtml = require("gulp-webp-html");

//Конфигурация
const path = require('../config/path');
const config = require('../config/config');
//const livereload = require("gulp-livereload");
//const connect = require('gulp-connect');

//Обработка HTML
const html = () => {
    return src(path.html.src)
        // .pipe(plumber({
        //     errorHandler: notify.onError(error => ({
        //         title: 'HTML',
        //         message: error.message
        //     }))
        // }))
        .pipe(webpHtml())
        //.pipe(size())//размер файла до сжатия
        .pipe(htmlmin(config.htmlmin)) //убираем лишние пробелы из разметки
        .pipe(size())//размер файла после сжатия
        .pipe(dest(path.html.dest))
        .pipe(browserSync.stream())
        //.pipe(livereload({start: true}))
        //.pipe(connect.reload())
}

module.exports = html;

Код таска sass

const {src, dest} = require("gulp");

const browserSync = require('browser-sync').create();
//const livereload = require("gulp-livereload");


const plumber = require("gulp-plumber");
const notify = require("gulp-notify");
//Объединяем все файлы стилей в один
const concat = require('gulp-concat');
const autoprefixer = require('gulp-autoprefixer');
//Минификация файла css
const csso = require('gulp-csso');
//Создание двух версий .css и .min.css
const rename = require('gulp-rename');
const size = require("gulp-size");
//Sass
const sass = require('gulp-sass')(require('sass'));
//Создание конструкции picture
const webpCss = require("gulp-webp-css");

//Конфигурация
const path = require('../config/path');
const config = require('../config/config');
//const connect = require("gulp-connect");

const scss = () => {
    return src(path.sass.src, {sourcemap: config.isDev})
        // .pipe(plumber({
        //     errorHandler: notify.onError(error => ({
        //         title: 'SASS',
        //         message: error.message
        //     }))
        // }))

        .pipe(sass({
            outputStyle: 'expanded',     // вложенный (по умолчанию)
        }))
        .pipe(webpCss())
        .pipe(concat('style.css'))
        .pipe(autoprefixer(config.autoprefixer))
        .pipe(size({title: 'style.css'}))
        .pipe(dest(path.sass.dest, {sourcemap: config.isDev}))
        .pipe(rename({suffix: '.min'}))
        .pipe(csso())
        .pipe(size({title: 'style.min.css'}))
        .pipe(dest(path.sass.dest, {sourcemap: config.isDev}))
        .pipe(browserSync.stream())

        //.pipe(livereload({start: true}))
        //.pipe(connect.reload())
}

module.exports = scss;

Код ошибки sass

src\sass\_rating.sass 14:21  @import
  src\sass\style.sass 30:9     root stylesheet
    messageOriginal: expected newline.
   ╷
14 │     color: redborder: 2px solid green
   │                     ^
   ╵
  src\sass\_rating.sass 14:21  @import
  src\sass\style.sass 30:9     root stylesheet
    relativePath: src\sass\_rating.sass
    domainEmitter: [object Object]
    domainThrown: false

После исправления style.css продолжает обновлятсяб а страница уже нет
Нашел совет изменить .pipe(browserSync.stream()) на .pipe(browserSync.reload({stream:true})) не помогло.

Comments

[its2easyy]

можно попробовать https://www.npmjs.com/package/gulp-plumber добавить в таски

[Модератор]

Не надо ставить как можно больше тэгов. Лучше оставить один, но конкретный, с которым проблема.
См.п.3.1 Регламента.

[Алан Гибизов]

прячьте длинные портянки кода под спойлер.

Answer 1

[imko]

Нужна обработка ошибки, щас плагин выкидывает ее и поток брыкается с концами
Что-то в таком духе

.pipe(sass())
        .on('error', function(err) {
            console.log(err);
            this.emit('end');
        })