I’m reaching out for some assistance regarding an issue I’ve encountered with my Gulpfile setup. I’ve configured the browser sync option in the file, and while changes are correctly getting reflected in the destination file, the browser does not auto-refresh. Instead, I have to manually refresh the browser to see the updates.I would really appreciate any help or guidance on how to fix this issue and get the auto-refresh working correctly.Thank you in advance for your time and support!
gulpfile.js
const gulp = require("gulp"), sass = require("gulp-sass")(require("sass")), plumber = require("gulp-plumber"), notify = require("gulp-notify"), sourcemaps = require("gulp-sourcemaps"), postcss = require("gulp-postcss"), autoprefixer = require("autoprefixer"), cssnano = require("gulp-cssnano"), uglify = require("gulp-uglify"), browserSync = require("browser-sync").create(), injectPartials = require("gulp-inject-partials"), del = require("del"), zip = require("gulp-zip"), concat = require("gulp-concat"); // PATHS const paths = { styles: { src: "src/scss/**/*.scss", }, mincss: { src: "src/mincss/*", }, bundle: { dest: "assets/theme-css/", filename: "bundle.min.css", }, minjs: { src: [ "src/minjs/jquery.min.js", "src/minjs/bootstrap.bundle.min.js", "src/minjs/**/*.js", "src/js/**/*.js", ], dest: "assets/theme-js/", }, image: { src: "src/img/**/*", dest: "assets/img/", }, fonts: { src: "src/fonts/*", dest: "assets/fonts/", }, html: { src: "src/templates/**/*.html", dest: "./", }, }; // WELCOME gulp.task("hello", function (done) { console.log("WELCOME TO GULP"); done(); }); // BUNDLE-CSS: SCSS + pre-minified CSS -> bundle.min.css gulp.task("bundle-css", function () { console.log("SCSS file changed, recompiling..."); return gulp .src([paths.mincss.src, paths.styles.src]) .pipe(plumber({ errorHandler: notify.onError("CSS Error: <%= error.message %>") })) .pipe(sourcemaps.init()) .pipe(sass().on("error", sass.logError)) .pipe(postcss([ autoprefixer({ overrideBrowserslist: ["last 2 versions"], cascade: false }) ])) .pipe(cssnano()) .pipe(concat(paths.bundle.filename)) .pipe(sourcemaps.write(".")) .pipe(gulp.dest(paths.bundle.dest)) .pipe(browserSync.stream()); }); // MINIFY JS gulp.task("minjs", function () { console.log("SCSS file changed, recompiling..."); return gulp .src(paths.minjs.src) .pipe(plumber({ errorHandler: notify.onError("JS Error: <%= error.message %>") })) .pipe(uglify()) .pipe(concat("single.min.js")) .pipe(gulp.dest(paths.minjs.dest)); }); // IMAGES gulp.task("image", function () { return gulp.src(paths.image.src).pipe(gulp.dest(paths.image.dest)); }); // FONTS gulp.task("fonts", function () { return gulp.src(paths.fonts.src).pipe(gulp.dest(paths.fonts.dest)); }); // HTML PARTIALS gulp.task("ptl_render", function () { return gulp .src([paths.html.src, "!src/templates/partial/*.html"]) .pipe(plumber({ errorHandler: notify.onError("HTML Error: <%= error.message %>") })) .pipe(injectPartials({ removeTags: true })) .pipe(gulp.dest(paths.html.dest)); }); // WATCH WITH BROWSER SYNC gulp.task("watch", function () { browserSync.init({ server: { baseDir: "./", notify:true }, injectChanges: true, // Ensures that CSS is injected reloadOnRestart: true, // Ensures the page is reloaded if necessary }); gulp.watch([paths.styles.src, paths.mincss.src], gulp.series("bundle-css")); gulp.watch(paths.html.src, gulp.series("ptl_render")); gulp.watch(paths.minjs.src, gulp.series("minjs")); gulp.watch(paths.image.src, gulp.series("image")); gulp.watch(paths.fonts.src, gulp.series("fonts")); // Reload browser when any of these files are changed gulp.watch([ "assets/theme-css/**/*.css", "assets/theme-js/**/*.js", "*.html", "assets/img/**/*", "assets/fonts/**/*" ]).on("change", browserSync.reload); }); // SERVE gulp.task("serve", gulp.parallel(["bundle-css", "ptl_render", "minjs","image","fonts"])); // DEFAULT gulp.task("default", gulp.series("serve", "watch")); // CLEAN TASKS gulp.task("clearAll", function () { return del(["assets", "./*.html", "./build"]); }); gulp.task("clearBuild", function () { return del("./build"); }); // ZIP PROJECT gulp.task("zip", function () { return gulp .src([ "./**/*", "!./node_modules/**", "!./src/**", "!./gulpfile.js", "!./package-lock.json", "!./package.json", ]) .pipe(zip("project.zip")) .pipe(gulp.dest("./zip")); }); // BUILD TO /build FOLDER gulp.task("build", function () { return gulp .src([ "./**/*", "!./node_modules/**", "!./src/**", "!./gulpfile.js", "!./package-lock.json", "!./package.json", ]) .pipe(gulp.dest("./build")); }); 
