From dac3a6b935783f5f11bf30a0f2be5b8b5ca0f1e2 Mon Sep 17 00:00:00 2001 From: EmeraldBlock Date: Wed, 24 Apr 2024 21:19:31 -0500 Subject: [PATCH] improve dev watching --- gulp/config.js | 2 +- gulp/css.js | 8 ++--- gulp/js.js | 20 ++++-------- gulp/tasks.js | 69 +++++++++++++++++------------------------- gulp/webpack.config.js | 1 - 5 files changed, 37 insertions(+), 63 deletions(-) diff --git a/gulp/config.js b/gulp/config.js index 7103084b..e54e1a0e 100644 --- a/gulp/config.js +++ b/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 diff --git a/gulp/css.js b/gulp/css.js index 9e512ef5..1b95f7bb 100644 --- a/gulp/css.js +++ b/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(browserSync.stream()); + .pipe(gulp.dest(buildFolder)); } export const resources = { @@ -104,8 +103,7 @@ function mainTask({ isProd }) { ]) ) .pipe(gulpPostcss(postcssPlugins(isProd))) - .pipe(gulp.dest(buildFolder)) - .pipe(browserSync.stream()); + .pipe(gulp.dest(buildFolder)); } export const main = { diff --git a/gulp/js.js b/gulp/js.js index 1af03f03..197bda39 100644 --- a/gulp/js.js +++ b/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)); } diff --git a/gulp/tasks.js b/gulp/tasks.js index f12e7296..c6266c16 100644 --- a/gulp/tasks.js +++ b/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: { - clicks: false, - scroll: false, - location: false, - forms: false, - }, + ghostMode: 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("./preloader/*.*", html.dev); + gulp.watch(["../src/html/**", "./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(extensions.map(ext => path.join(buildFolder, "**", "*." + ext))).on("change", p => - gulp - .src(pathNative.resolve(p).replaceAll(pathNative.sep, path.sep)) - .pipe(browserSync.reload({ stream: true })) + gulp.watch(path.join(buildFolder, "**")).on("change", p => + gulp.src(pathNative.resolve(p).replaceAll(pathNative.sep, path.sep)).pipe(browserSync.stream()) ); - - 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( - utils.cleanup, - utils.copyAdditionalBuildFiles, - localConfig.findOrCreate, - gulp.parallel( - gulp.series(imgres.buildAtlas, imgres.atlasToJson, imgres.atlas), - sounds.dev, - gulp.series(imgres.copyImageResources, css.dev), - imgres.copyNonImageResources, - translations.fullBuild - ) - ), + dev: variant => + gulp.series( + utils.cleanup, + localConfig.findOrCreate, + gulp.parallel( + utils.copyAdditionalBuildFiles, + gulp.series(imgres.buildAtlas, gulp.parallel(imgres.atlasToJson, imgres.atlas)), + gulp.series(imgres.copyImageResources, css.dev), + imgres.copyNonImageResources, + 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! diff --git a/gulp/webpack.config.js b/gulp/webpack.config.js index a911d2af..581dfd98 100644 --- a/gulp/webpack.config.js +++ b/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),