html files in dist folder don't update - gulp

Question

I'm using Zurb panini to do templating and construct pages. I'm not sure where I did wrong. Now if I update my scss files, the BrowserSync will reload and the update will show. But it just doesn't work when I update html files. Could anyone help me to take a look my Gulp config? Thx~
var gulp = require('gulp');
var panini = require('panini');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var autoprefixer = require('autoprefixer-core');
var clean = require('gulp-clean');
gulp.task('copy', function() {
return gulp.src('./src/assets/icon/*')
.pipe(gulp.dest('./dist/assets/icon'));
});
gulp.task('sass', function(){
var processors = [
autoprefixer({browsers:['last 2 versions']})
];
return gulp.src('./src/assets/sass/*.scss')
.pipe(sass())
.pipe(concat('style.css'))
.pipe(gulp.dest('./dist/assets'))
});
gulp.task('clean', function () {
return gulp.src('./dist/*.html', {read: false})
.pipe(clean());
});
gulp.task('pages', function() {
return gulp.src('src/pages/**/*.html')
.pipe(panini({
root: 'src/pages/',
layouts: 'src/layouts/',
partials: 'src/partials/',
}))
.pipe(concat('index.html'))
.pipe(gulp.dest('./dist'));
});
gulp.task('browserSync', function(){
browserSync.init({
server: "./dist"
});
});
gulp.task('watch', function(){
gulp.watch(['./src/{layouts,partials}/**/*'], [panini.refresh]);
gulp.watch("./src/assets/sass/**/*.scss", ['sass']).on('change', browserSync.reload);
gulp.watch("./src/**/*.html").on('change', browserSync.reload);
});
gulp.task('build', ['clean', 'copy', 'sass', 'pages']);
gulp.task('default', ['build', 'watch', 'browserSync']);

Answer 1

//gulp 4.0.2 panini 1.6.3
gulp.task('compile-html', function(){
var paniniOption = {
root: 'src/html/pages/',
layouts: 'src/html/layouts/',
partials: 'src/html/includes/',
helpers: 'src/html/helpers/',
data: 'src/html/data/'
}
return gulp.src('src/html/pages/**/*.html')
.pipe(panini(paniniOption))
.pipe(gulp.dest('_site'));
});
gulp.watch('src/html/pages/**/*').on('change', gulp.series('compile-html', browserSync.reload));
gulp.watch('src/html/{layouts,includes,helpers,data}/**/*').on('change', gulp.series(async () => { await panini.refresh() }, 'compile-html', browserSync.reload));