1
0
mirror of https://github.com/tobspr/shapez.io.git synced 2025-12-11 09:11:50 +00:00

improve dev watching

This commit is contained in:
EmeraldBlock 2024-04-24 21:19:31 -05:00
parent 39b7e6cb59
commit dac3a6b935
5 changed files with 37 additions and 63 deletions

View File

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

View File

@ -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 = {

View File

@ -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));
}

View File

@ -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!

View File

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