Why did the Browser-Sync page stop updating?

Question

npm

Good afternoon!
The project page with Browser-Sync stopped updating. And the page opens, but when changes are made, it is not updated. Nothing has changed in the configuration. Another project with the same Gulp file configuration builds and updates fine.
The page stopped updating during the development of the project, i.e. plugins and gulp file did not change.
gulp file

global.hostname = "localhost";

    var gulp = require('gulp');
    var sass = require('gulp-sass');
    var prefixer = require('gulp-autoprefixer');
    var uglify = require('gulp-uglify');
    var rigger = require('gulp-rigger');
    var nano = require('gulp-cssnano');
    var imagemin = require('gulp-imagemin');
    var pngquant = require('imagemin-pngquant');
    var browserSync = require("browser-sync");
    var sourcemaps = require('gulp-sourcemaps');
    var rename = require("gulp-rename");
    var reload = browserSync.reload;
    var watch = require('gulp-watch');
    var rimraf = require('rimraf');
    var bourbon = require('node-bourbon');
    var spritesmith = require('gulp.spritesmith');


    var path = {
        build: { //Тут мы укажем куда складывать готовые после сборки файлы
            html: 'build/',
            js: 'build/js/',
            css: 'build/css/',
            img: 'build/img/',
            fonts: 'build/fonts/',
            vendor: 'build/vendor'
        },
        src: { //Пути откуда брать исходники
            html: 'src/*.html', //Синтаксис src/*.html говорит gulp что мы хотим взять все файлы с расширением .html
            js: 'src/js/main.js',//В стилях и скриптах нам понадобятся только main файлы
            style: 'src/sass/*.scss',
            img: 'src/img/**/*.*', //Синтаксис img/**/*.* означает - взять все файлы всех расширений из папки и из вложенных каталогов
            fonts: 'src/fonts/**/*.*',
            vendor: 'src/vendor/**/*.*'
        },
        watch: { //Тут мы укажем, за изменением каких файлов мы хотим наблюдать
            html: 'src/**/*.html',
            js: 'src/js/**/*.js',
            style: 'src/sass/**/*.scss',
            img: 'src/img/**/*.*',
            fonts: 'src/fonts/**/*.*',
            vendor: 'src/vendor/**/*.*'
        },
        clean: './build'
    };

    var config = {
        server: {
            baseDir: "./build"
        },
        tunnel: true,
        host: 'localhost',
        port: 9000,
        logPrefix: "Frontend"
    };


gulp.task('webserver', function () {
    browserSync(config);
});

gulp.task('clean', function (cb) {
    rimraf(path.clean, cb);
});

gulp.task('sprite', function() {
    var spriteData =
        gulp.src('src/img/sprite/*.*') // путь, откуда берем картинки для спрайта
            .pipe(spritesmith({
                imgName: 'sprite.png',
                cssName: '_sprite.scss',
                cssFormat: 'scss',
                algorithm: 'top-down',
                padding: 0,
                cssTemplate: 'scss.template.mustache',
                cssVarMap: function(sprite) {
                }//
            }));

    spriteData.img.pipe(gulp.dest('src/img/')); // путь, куда сохраняем картинку
    spriteData.css.pipe(gulp.dest('src/sass/')); // путь, куда сохраняем стили
});

gulp.task('html:build', function () {
    gulp.src(path.src.html) //Выберем файлы по нужному пути
        .pipe(rigger()) //Прогоним через rigger
        .pipe(gulp.dest(path.build.html)) //Выплюнем их в папку build
        .pipe(reload({stream: true})); //И перезагрузим наш сервер для обновлений
});

gulp.task('js:build', function () {
    gulp.src(path.src.js) //Найдем наш main файл
        .pipe(rigger()) //Прогоним через rigger
        .pipe(sourcemaps.init()) //Инициализируем sourcemap
        .pipe(uglify()) //Сожмем наш js
        .pipe(sourcemaps.write()) //Пропишем карты
        .pipe(gulp.dest(path.build.js)) //Выплюнем готовый файл в build
        .pipe(reload({stream: true})); //И перезагрузим сервер
});

gulp.task('style:build', function () {
    gulp.src(path.src.style) //Выберем наш main.scss
        .pipe(sourcemaps.init()) //Инициализируем sourcemap
        .pipe(sass({
                includePaths: bourbon.includePaths
            }).on('error', sass.logError)) //Скомпилируем
        .pipe(prefixer({
            browsers: ['last 5 versions'],
            cascade: false
        })) //Добавим вендорные префиксы
        .pipe(nano(
            {zindex: false}
        )) //Сожмем
        .pipe(rename({
            basename: "build",
            suffix: '.min'}))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(path.build.css)) //И в build
        .pipe(reload({stream: true}));
});

gulp.task('image:build', function () {
    gulp.src(path.src.img) //Выберем наши картинки
        .pipe(imagemin({ //Сожмем их
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()],
            interlaced: true
        }))
        .pipe(gulp.dest(path.build.img)) //И бросим в build
        .pipe(reload({stream: true}));
});

gulp.task('fonts:build', function() {
    gulp.src(path.src.fonts)
        .pipe(gulp.dest(path.build.fonts))
});

gulp.task('vendor:build', function() {
    gulp.src(path.src.vendor)
        .pipe(gulp.dest(path.build.vendor))
});

gulp.task('build', [
    'html:build',
    'js:build',
    'style:build',
    'fonts:build',
    'image:build',
    'vendor:build'
]);

gulp.task('watch', function(){
    watch([path.watch.html], function(event, cb) {
        gulp.start('html:build');
    });
    watch([path.watch.style], function(event, cb) {
        gulp.start('style:build');
    });
    watch([path.watch.js], function(event, cb) {
        gulp.start('js:build');
    });
    watch([path.watch.img], function(event, cb) {
        gulp.start('image:build');
    });
    watch([path.watch.fonts], function(event, cb) {
        gulp.start('fonts:build');
    });
    watch([path.watch.vendor], function(event, cb) {
        gulp.start('vendor:build');
    });
});


gulp.task('default', ['build', 'webserver', 'watch']);

Answer 1

Faced such a problem.
Immediately after the <body> tag, and if for some reason the opening <body> tag is missing on the page, Live Reload will stop working.

Why isn't Browsersync connecting with my project?
99% of the time, it's because your web page doesn't have a body tag. In order for Browsersync to connect properly the body tag must be present in your website (we add a script tag just after it). alternatively you can provide a custom rule for the snippet using snippetOptions

Answer 2

I can’t tell you the reason (obviously because of the update), but there is a working option
Then in each watch you need to addbrowserSync.reload

gulp.watch(path.watch.style, ['style:build', browserSync.reload])