Why is the page not updating through BrowserSync?

Question

HTML

Hello! Can you please tell me why the page refresh does not work when storing pug files and stylus?
var gulp = require('gulp'),
browsersync = require('browser-sync'),
reload = browsersync.reload,
spritesmith = require("gulp.spritesmith"),
pugInheritance = require('gulp-pug-inheritance') ,
pug = require('gulp-pug'),
changed = require('gulp-changed'),
cached = require('gulp-cached'),
gulpif = require('gulp-if'),
filter = require(' gulp-filter'),
stylus = require('gulp-stylus'),
sourcemaps = require('gulp-sourcemaps'),
csscomb = require('
notify = require("gulp-notify"),
autoprefixer = require('gulp-autoprefixer');
// PUG
gulp.task('pug', function() {
return gulp.src('dev/pug/**/*.pug')
//only pass unchanged *main* files and *all* the partials
.pipe (changed('dist', { extension: '.html' }))
//filter out unchanged partials, but it only works when watching
.pipe(gulpif(global.isWatching, cached('pug')))
//find files that depend on the files that have changed
.pipe(pugInheritance({ basedir: 'dev/pug/', extension: '.pug', skip: 'node_modules' }))
//filter out partials (folders and files starting with "_")
.
return !/\/_/.test(file.path) && !/^_/.test(file.relative);
}))
.pipe(plumber())
.pipe(pug())
.on("error", notify.onError(function(error) {
return "Message to the notifier: " + error.message;
}))
. pipe(gulp.dest('dist'));
});
gulp.task('setWatch', function() {
global.isWatching = true;
});
// STYLUS
gulp.task('stylus', function() {
return gulp.src('dev/static/stylus/*.styl')
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe (stylus({
'include css': true,
}))
.on("error", notify.onError(function(error) {
return "Message to the notifier: " + error.message;
}))
.pipe(autoprefixer(['last 2 version']))
. pipe(sourcemaps.write('.'))
.pipe(csscomb())
.pipe(gulp.dest('dist/static/css/'))
.pipe(reload({
stream: true
}));
});
// SERVER
gulp.task('browsersync', function() {
browsersync.init({
server: {
baseDir: 'dist'
},
});
});
// Build PNG sprites
gulp.task('
return del.sync('dev/static/img/sprite/sprite.png');
});
gulp.task('spritemade', function() {
var spriteData =
gulp.src('dev/static/img/sprite/*.*')
.pipe(spritesmith({
imgName: 'sprite.png',
cssName: ' _sprite.styl',
padding: 10,
cssFormat: 'stylus',
algorithm: 'binary-tree',
cssTemplate: 'stylus.template.mustache',
cssVarMap: function(sprite) {
sprite.name = 's-' + sprite .name;
}
}));
spriteData.img.pipe(gulp.dest(' dev/static/img/sprite/')); // path where we save the image
spriteData.css.pipe(gulp.dest('dev/static/stylus/')); // path where we save styles
});
gulp.task('sprite', ['cleansprite', 'spritemade']);
// WATCH
gulp.task('watch', ['browsersync', 'stylus'], function() {
gulp.watch('dev/static/stylus/**/*.styl', ['stylus']) ;
gulp.watch('dev/pug/*.pug', ['pug']);
gulp.watch('dist/*.html', browsersync.reload);
});
// Default task
gulp.task('default', ['watch']);
Thanks in advance

Answer 1

I didn't check it, just a thought
Or, instead of reload, hang browsersync.reload in the necessary tasks, you can try

Answer 2

You should hang a handler on the 'change' event, an example from the documentation:

gulp.task('serve', ['sass'], function() {

    browserSync.init({
        server: "./app"
    });

    gulp.watch("app/scss/*.scss", ['sass']);
    gulp.watch("app/*.html").on('change', browserSync.reload);  // Обработчик
});

gulp.task('sass', function() {
    return gulp.src("app/scss/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("app/css"))
        .pipe(browserSync.stream());
});

gulp.task('default', ['serve']);

Also, the documentation advises using the post 2.0.0 syntax, that is, creating an instance of the class
More examples and information can be found here and here

Answer 3

Had a similar problem after connecting pug. The page was stubbornly not updated, although everything worked in the console. Later I found out that when converting Html to Pug, the body tag disappeared. Actually after adding this tag, the problem disappeared.
I can also advise in the watch task instead of using
and write .on('change', browserSync.reload) for .pug and .styl files, otherwise it only updates your .html changes.