improve dev watching

gulp/config.js

@@ -19,7 +19,7 @@ export const imageResourcesGlobs = [
     "../res/**/*.gif",
 ];
 
-export const browserSync = BrowserSync.create({});
+export const browserSync = BrowserSync.create();
 
 // Check environment variables
 

gulp/css.js

@@ -1,7 +1,7 @@
 import path from "path/posix";
 import gulp from "gulp";
 import { getRevision } from "./buildutils.js";
-import { buildFolder, browserSync } from "./config.js";
+import { buildFolder } from "./config.js";
 
 import gulpPostcss from "gulp-postcss";
 import postcssAssets from "postcss-assets";
@@ -78,8 +78,7 @@ function resourcesTask({ isProd }) {
         )
         .pipe(gulpRename("async-resources.css"))
         .pipe(gulpPostcss(postcssPlugins(isProd)))
-        .pipe(gulp.dest(buildFolder))
+        .pipe(gulp.dest(buildFolder));
-        .pipe(browserSync.stream());
 }
 
 export const resources = {
@@ -104,8 +103,7 @@ function mainTask({ isProd }) {
             ])
         )
         .pipe(gulpPostcss(postcssPlugins(isProd)))
-        .pipe(gulp.dest(buildFolder))
+        .pipe(gulp.dest(buildFolder));
-        .pipe(browserSync.stream());
 }
 
 export const main = {

gulp/js.js

@@ -1,6 +1,7 @@
 import gulp from "gulp";
+import webpack from "webpack";
 import { BUILD_VARIANTS } from "./build_variants.js";
-import { buildFolder, browserSync } from "./config.js";
+import { buildFolder } from "./config.js";
 
 import webpackConfig from "./webpack.config.js";
 import webpackProductionConfig from "./webpack.production.config.js";
@@ -21,23 +22,14 @@ import gulpRename from "gulp-rename";
 
 export default Object.fromEntries(
     Object.entries(BUILD_VARIANTS).map(([variant, data]) => {
-        function watch() {
-            return gulp
-                .src("../src/js/main.js")
-                .pipe(webpackStream(webpackConfig))
-                .pipe(gulp.dest(buildFolder))
-                .pipe(browserSync.stream());
-        }
-
         function build() {
             return gulp
                 .src("../src/js/main.js")
-                .pipe(webpackStream(webpackConfig))
+                .pipe(webpackStream(webpackConfig, webpack))
                 .pipe(gulp.dest(buildFolder));
         }
 
         const dev = {
-            watch,
             build,
         };
 
@@ -48,7 +40,7 @@ export default Object.fromEntries(
             function transpiled() {
                 return gulp
                     .src("../src/js/main.js")
-                    .pipe(webpackStream(webpackProductionConfig))
+                    .pipe(webpackStream(webpackProductionConfig, webpack))
                     .pipe(gulpRename("bundle-transpiled.js"))
                     .pipe(gulp.dest(buildFolder));
             }
@@ -56,7 +48,7 @@ export default Object.fromEntries(
             function es6() {
                 return gulp
                     .src("../src/js/main.js")
-                    .pipe(webpackStream(webpackProductionConfig))
+                    .pipe(webpackStream(webpackProductionConfig, webpack))
                     .pipe(gulp.dest(buildFolder));
             }
 
@@ -73,7 +65,7 @@ export default Object.fromEntries(
             function build() {
                 return gulp
                     .src("../src/js/main.js")
-                    .pipe(webpackStream(webpackProductionConfig))
+                    .pipe(webpackStream(webpackProductionConfig, webpack))
                     .pipe(gulp.dest(buildFolder));
             }
 

gulp/tasks.js

@@ -53,7 +53,7 @@ function cleanImageBuildFolder() {
         .pipe(gulpClean({ force: true }));
 }
 
-const cleanup = gulp.series(cleanBuildFolder, cleanImageBuildFolder, cleanBuildTempFolder);
+const cleanup = gulp.parallel(cleanBuildFolder, cleanImageBuildFolder, cleanBuildTempFolder);
 
 // Requires no uncomitted files
 async function requireCleanWorkingTree() {
@@ -116,42 +116,37 @@ function webserver() {
  * @param {object} param0
  * @param {keyof typeof BUILD_VARIANTS} param0.version
  */
-function serveHTML({ version = "web-dev" }) {
+async function serveHTML({ version = "web-dev" }) {
     browserSync.init({
         server: [buildFolder, path.join(baseDir, "mod_examples")],
         port: 3005,
-        ghostMode: {
+        ghostMode: false,
-            clicks: false,
-            scroll: false,
-            location: false,
-            forms: false,
-        },
         logLevel: "info",
         logPrefix: "BS",
         online: false,
-        xip: false,
         notify: false,
         reloadDebounce: 100,
-        reloadOnRestart: true,
         watchEvents: ["add", "change"],
+        open: false,
     });
 
+    gulp.watch("../src/js/**", js[version].dev.build);
+
     // Watch .scss files, those trigger a css rebuild
-    gulp.watch(["../src/**/*.scss"], css.dev);
+    gulp.watch("../src/css/**", css.dev);
 
     // Watch .html files, those trigger a html rebuild
-    gulp.watch("../src/**/*.html", html.dev);
+    gulp.watch(["../src/html/**", "./preloader/*"], html.dev);
-    gulp.watch("./preloader/*.*", html.dev);
 
     // Watch translations
-    gulp.watch("../translations/**/*.yaml", translations.convertToJson);
+    gulp.watch("../translations/*.yaml", translations.convertToJson);
 
     gulp.watch(
-        ["../res_raw/sounds/sfx/*.mp3", "../res_raw/sounds/sfx/*.wav"],
+        ["../res_raw/sounds/sfx/**/*.mp3", "../res_raw/sounds/sfx/**/*.wav"],
         gulp.series(sounds.sfx, sounds.copy)
     );
     gulp.watch(
-        ["../res_raw/sounds/music/*.mp3", "../res_raw/sounds/music/*.wav"],
+        ["../res_raw/sounds/music/**/*.mp3", "../res_raw/sounds/music/**/*.wav"],
         gulp.series(sounds.music, sounds.copy)
     );
 
@@ -165,20 +160,9 @@ function serveHTML({ version = "web-dev" }) {
     gulp.watch("../res_built/atlas/*.json", imgres.atlas);
 
     // Watch the build folder and reload when anything changed
-    const extensions = ["html", "js", "png", "gif", "jpg", "svg", "mp3", "ico", "woff2", "json"];
+    gulp.watch(path.join(buildFolder, "**")).on("change", p =>
-    gulp.watch(extensions.map(ext => path.join(buildFolder, "**", "*." + ext))).on("change", p =>
+        gulp.src(pathNative.resolve(p).replaceAll(pathNative.sep, path.sep)).pipe(browserSync.stream())
-        gulp
-            .src(pathNative.resolve(p).replaceAll(pathNative.sep, path.sep))
-            .pipe(browserSync.reload({ stream: true }))
     );
-
-    gulp.watch("../src/js/built-temp/*.json").on("change", p =>
-        gulp
-            .src(pathNative.resolve(p).replaceAll(pathNative.sep, path.sep))
-            .pipe(browserSync.reload({ stream: true }))
-    );
-
-    gulp.series(js[version].dev.watch)(() => true);
 }
 
 // Pre and postbuild
@@ -199,18 +183,19 @@ export const step = {
 
 // Builds everything (dev)
 const prepare = {
-    dev: gulp.series(
+    dev: variant =>
-        utils.cleanup,
+        gulp.series(
-        utils.copyAdditionalBuildFiles,
+            utils.cleanup,
-        localConfig.findOrCreate,
+            localConfig.findOrCreate,
-        gulp.parallel(
+            gulp.parallel(
-            gulp.series(imgres.buildAtlas, imgres.atlasToJson, imgres.atlas),
+                utils.copyAdditionalBuildFiles,
-            sounds.dev,
+                gulp.series(imgres.buildAtlas, gulp.parallel(imgres.atlasToJson, imgres.atlas)),
-            gulp.series(imgres.copyImageResources, css.dev),
+                gulp.series(imgres.copyImageResources, css.dev),
-            imgres.copyNonImageResources,
+                imgres.copyNonImageResources,
-            translations.fullBuild
+                html.dev,
-        )
+                gulp.series(gulp.parallel(sounds.dev, translations.fullBuild), js[variant].dev.build)
-    ),
+            )
+        ),
 };
 
 /**
@@ -282,7 +267,7 @@ for (const variant in BUILD_VARIANTS) {
     }
 
     // serve
-    serve[variant] = gulp.series(build.prepare.dev, html.dev, () => serveHTML({ version: variant }));
+    serve[variant] = gulp.series(build.prepare.dev(variant), () => serveHTML({ version: variant }));
 }
 
 // Deploying!

gulp/webpack.config.js

@@ -95,7 +95,6 @@ export default {
         extensions: [".ts", ".js", ".tsx", ".jsx"],
     },
     devtool: "cheap-source-map",
-    watch: true,
     cache: false,
     plugins: [
         new webpack.DefinePlugin(globalDefs),