pug file compiled to html does not livereload - gulp

Question

In my project folder, I have pug files that are located in src/pug/*.pug, one of those files is index.pug. When compiled to html, the compiled files are located in build/templates/*.html. In the serve task, in browsersync.init(), I changed the baseDir from ./ to build/templates/ because the compiled index.html is located there. The problem is, browsersync livereload does not work; I have to refresh the browser just to see the changes I make in index.pug.
Gulpfile.js
const gulp = require('gulp'),
sass = require('gulp-sass'),
pug = require('gulp-pug'),
uglify = require('gulp-uglify'),
plumber = require('gulp-plumber'),
imagemin = require('gulp-imagemin'),
concat = require('gulp-concat'),
autoprefixer = require('gulp-autoprefixer'),
browserSync = require('browser-sync');
gulp.task('templates', () => {
return gulp.src('src/pug/*.pug')
.pipe(plumber())
.pipe(pug({pretty: true}))
.pipe(gulp.dest('build/templates/'))
.pipe(browserSync.stream({stream: true}));
});
gulp.task('styles', () => {
return gulp.src('src/sass/**/*.sass')
.pipe(plumber())
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('build/css/all/'))
.pipe(concat('style.css'))
.pipe(gulp.dest('build/css/'))
.pipe(browserSync.stream({stream: true}));
});
gulp.task('scripts', () => {
return gulp.src('src/js/*.js')
.pipe(plumber())
.pipe(concat('script.js'))
.pipe(gulp.dest('build/js/'))
.pipe(browserSync.stream({stream: true}));
});
gulp.task('imagemin', () => {
gulp.src('assets/img/src/**/*')
.pipe(imagemin())
.pipe(gulp.dest('assets/img/dist/'));
});
gulp.task('serve', ['templates', 'styles', 'scripts'], () => {
browserSync.init({
server: {
baseDir: 'build/templates/'
},
notify: false
});
gulp.watch('src/pug/*.pug', ['templates']);
gulp.watch('src/sass/**/*.sass', ['styles']);
gulp.watch('src/js/*.js', ['scripts']);
gulp.watch('build/templates/index.html').on('change', browserSync.reload);
});
gulp.task('default', ['imagemin', 'serve']);
Can someone help me fix this?

Answer 1

Not sure why that doesn't work, but I have compared your build file to the official docs, and I came across this approach from the docs: Instead of watching the HTML files, it watches the source (pug files in your case) and calls browserSync.reload after that source compilation task has completed. In your case, the pug line would be replaced by something like this:
gulp.watch('src/pug/*.pug', ['templates-watch']);
And you would create a new task, called templates-watch, that would be defined as follows:
gulp.task('templates-watch', ['templates'], function (done) {
browserSync.reload();
done();
});