swap browser-sync -> webpack-dev-server

gulpfile.js

@@ -1,11 +1,8 @@
-import path from "path";
-import { fileURLToPath } from "url";
-import del from "del";
 import gulp from "gulp";
 import { task as execa } from "gulp-execa";
 import cache from "gulp-cache";
 import htmlmin from "gulp-html-minifier-terser";
-import BrowserSync from "browser-sync";
+import del from "del";
 
 // use up-to-date imagemin plugins instead of those bundled with gulp-imagemin:
 import imagemin from "gulp-imagemin";
@@ -14,9 +11,6 @@ import imageminPngquant from "imagemin-pngquant";
 import imageminGifsicle from "imagemin-gifsicle";
 import imageminSvgo from "imagemin-svgo";
 
-// https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c#what-do-i-use-instead-of-__dirname-and-__filename
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-
 gulp.task("default", gulp.series(
   clean,
   npx("webpack", ["--mode", "production"]),
@@ -30,9 +24,8 @@ gulp.task("default", gulp.series(
 gulp.task("serve", gulp.series(
   clean,
   gulp.parallel(
-    npx("webpack", ["--watch", "--mode", "development"]),
+    npx("webpack", ["serve", "--mode", "development"]),
     npx("hugo", ["--watch", "--buildDrafts", "--buildFuture", "--verbose"]),
-    startServer,
   ),
 ));
 
@@ -47,27 +40,6 @@ function clean() {
   ]);
 }
 
-function startServer() {
-  const browserSync = BrowserSync.create();
-  const publicDir = path.resolve(__dirname, "public");
-
-  browserSync.init({
-    server: {
-      baseDir: publicDir,
-    },
-    port: process.env.PORT || 1337,
-    reloadDelay: 1000, // delay to prevent double-refresh from hugo & webpack negotiating
-    open: false,
-    ui: false,
-    notify: true,
-    localOnly: true,
-  });
-
-  return gulp
-    .watch("public/**/*")
-    .on("change", browserSync.reload);
-}
-
 function optimizeHtml() {
   return gulp
     .src("public/**/*.html", { base: "./" })