Why is gulp-pug not being updated?

Question

gulp.js

Hello!
After a long wandering through all sorts of Vue / Angular cli, I had to return to Gulp. The problem is that when changing nested .pug files in the pug folder, the reload does not work (pug compiles to html, the problem is in the reload)

Folder structure:

Accordingly, only .pug files from the root should be compiled, changes can be observed in all files

Current config

var syntax = "scss";

gulp.task("browser-sync", function() {
  browserSync({
    server: {
      baseDir: "app"
    },
    notify: false,
    open: false
  });
});

gulp.task("pug", function() {
  gulp
    .src("app/pug/*.pug")
    .pipe(
      pug({
        doctype: "html",
        pretty: true
      })
    )
    .pipe(gulp.dest("app/"))
    .pipe(browserSync.stream());
});

gulp.task("watch", function() {
  gulp.watch("app/pug/*.pug", gulp.parallel("pug"));
});

gulp.task(
  "default",
  gulp.parallel("pug", "styles", "browser-sync", "watch")
);

Answer 1

I suggest doing this:

var browserSync  = require('browser-sync').create()
var bsConfig = {
    server: {
      baseDir: 'app'
    },
    notify: false,
    open: false
  }; 

gulp.task('watch', function(){
  browserSync.init(bsConfig);
  gulp.watch("app/pug/*.pug", gulp.parallel("pug"));
})

WatcherI suggest using it this way