使用GulpJs + BrowserSync将更改实时重新加载到位于根文件夹中的index.html文件中

Question

我能够对css和Js文件进行实时更改，但是每当我对HTML内容进行更改时，都无法在浏览器中看到实时更改。

我还要附加我的文件结构屏幕截图：

请任何人帮助我将此功能添加到以下代码中。

            // Gulp.js configuration

var
gulp = require('gulp'),
newer = require('gulp-newer'),
imagemin = require('gulp-imagemin'),
htmlclean = require('gulp-htmlclean'),
concat = require('gulp-concat'),
deporder = require('gulp-deporder'),
stripdebug = require('gulp-strip-debug'),
uglify = require('gulp-uglify'),
sass = require('gulp-sass'),
postcss = require('gulp-postcss'),
assets = require('postcss-assets'),
autoprefixer = require('autoprefixer'),
mqpacker = require('css-mqpacker'),
cssnano = require('cssnano'),
browserSync = require('browser-sync').create(),
htmlInjector = require("bs-html-injector"),
reload = browserSync.reload,

devBuild = (process.env.NODE_ENV !== 'production'),

// folders
folder = {
src: 'src/',
build: 'build/',
root: " "
}
;

gulp.task('htmlInjector', function() {
return gulp.src("*.html")
.pipe(htmlInjector())
.pipe(browserSync.stream());

});

gulp.task('serve', gulp.series('sass', function() {

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

browserSync.use(htmlInjector, {
files: "*.html"
});


gulp.watch("src/scss/*.scss", gulp.series('sass'));
gulp.watch("/*.html").on('change', browserSync.reload);
gulp.watch("src/js/*.js", gulp.series('js-watch'));

}));

// default task
gulp.task('default', gulp.series('run', 
'serve'));

// Source file structure