Browsersync not reloading

Question

I used many variation of gulpfile.js and "browser-sync start --server --files "*.html" command of global browsersync, but autoreload not working. I received only

[Browsersync] Access URLs:

   Local: http://localhost:3000
External: http://192.168.56.1:3000

      UI: http://localhost:3001
UI External: http://192.168.56.1:3001

[Browsersync] Serving files from: ./
[Browsersync] Watching files...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...

That's my gulpfile.js. Help me to repair autoreload, pleeease

var gulp        = require('gulp');
var sass        = require('gulp-sass');
var pug         = require('gulp-pug');
var browserSync = require('browser-sync');
var sequence    = require('run-sequence');
var server      = browserSync.create();
var reload      = server.reload;

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

gulp.task('pug', function() {
    return gulp.src(['./app/pug/*.pug', '!./node_modules/**'])
        .pipe(pug({
            basedir: __dirname,
            doctype: 'html',
        }))
        .pipe(gulp.dest("./app"))
        .pipe(server.stream())
});

gulp.task('browser-sync', function() {
    server.init({
        server: 'app',
        port: 3010
    });
  });
  

gulp.task('watch', ['build'], function() {
    gulp.watch("./app/pug/*.pug", ['pug']);
    gulp.watch("./app/scss/*.scss", ['sass']);
});

gulp.task('build', function(done) {
    sequence(
      ['pug', 'sass'],
      'browser-sync',
      done);
  });

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

Gulp @ 3.9.0 Browsersync @ 2.24.6

Answer 1

Append reload after each watch call. You have initiated browser sync, but you need to let it know when to reload. And it should reload on any file change. So add it after watch()

 gulp.watch("./app/pug/*.pug", ['pug']).on('change', browserSync.reload);
 gulp.watch("./app/scss/*.scss", ['sass']).on('change', browserSync.reload);

var gulp        = require('gulp');
var sass        = require('gulp-sass');
var pug         = require('gulp-pug');
var browserSync = require('browser-sync');
var sequence    = require('run-sequence');
var server      = browserSync.create();
var reload      = server.reload;

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

gulp.task('pug', function() {
    return gulp.src(['./app/pug/*.pug', '!./node_modules/**'])
        .pipe(pug({
            basedir: __dirname,
            doctype: 'html',
        }))
        .pipe(gulp.dest("./app"))
        .pipe(server.stream())
});

gulp.task('browser-sync', function() {
    server.init({
        server: 'app',
        port: 3010
    });
  });
  

gulp.task('watch', ['build'], function() {
    gulp.watch("./app/pug/*.pug", ['pug']).on('change', browserSync.reload);
    gulp.watch("./app/scss/*.scss", ['sass']).on('change', browserSync.reload);
});

gulp.task('build', function(done) {
    sequence(
      ['pug', 'sass'],
      'browser-sync',
      done);
  });

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