Archives/tobspr_shapez.io
1
0
Fork 0
mirror of https://github.com/tobspr/shapez.io.git synced 2025-12-13 18:21:51 +00:00
Code Issues Projects Releases Wiki Activity

Apply formatting to gulp

Browse Source
This commit is contained in:
Даниїл Григор'єв 2024-06-20 13:00:58 +03:00
parent f49def0c19
commit 5ff15f3029
No known key found for this signature in database
GPG Key ID: B890DF16341D8C1D
6 changed files with 452 additions and 452 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
gulp/buildutils.js
View File

@ -31,4 +31,4 @@ export function getTag() {
export function getVersion() { export function getVersion() {
// Use the version number specified in package.json // Use the version number specified in package.json
return JSON.parse(fs.readFileSync("../package.json", "utf-8")).version; return JSON.parse(fs.readFileSync("../package.json", "utf-8")).version;
} }

236
gulp/css.js
View File

@ -1,118 +1,118 @@
import path from "path/posix"; import path from "path/posix";
import gulp from "gulp"; import gulp from "gulp";
import { getRevision } from "./buildutils.js"; import { getRevision } from "./buildutils.js";
import { buildFolder } from "./config.js"; import { buildFolder } from "./config.js";
import gulpPostcss from "gulp-postcss"; import gulpPostcss from "gulp-postcss";
import postcssAssets from "postcss-assets"; import postcssAssets from "postcss-assets";
import postcssPresetEnv from "postcss-preset-env"; import postcssPresetEnv from "postcss-preset-env";
import postcssRoundSubpixels from "postcss-round-subpixels"; import postcssRoundSubpixels from "postcss-round-subpixels";
import postcssCriticalSplit from "postcss-critical-split"; import postcssCriticalSplit from "postcss-critical-split";
import cssMqpacker from "css-mqpacker"; import cssMqpacker from "css-mqpacker";
import cssnano from "cssnano"; import cssnano from "cssnano";
import gulpSassLint from "gulp-sass-lint"; import gulpSassLint from "gulp-sass-lint";
import gulpDartSass from "gulp-dart-sass"; import gulpDartSass from "gulp-dart-sass";
import gulpPlumber from "gulp-plumber"; import gulpPlumber from "gulp-plumber";
import gulpRename from "gulp-rename"; import gulpRename from "gulp-rename";
// The assets plugin copies the files // The assets plugin copies the files
const commitHash = getRevision(); const commitHash = getRevision();
const postcssAssetsPlugin = postcssAssets({ const postcssAssetsPlugin = postcssAssets({
loadPaths: [path.join(buildFolder, "res", "ui")], loadPaths: [path.join(buildFolder, "res", "ui")],
basePath: buildFolder, basePath: buildFolder,
baseUrl: ".", baseUrl: ".",
}); });
// Postcss configuration // Postcss configuration
const postcssPlugins = prod => { const postcssPlugins = prod => {
const plugins = [postcssAssetsPlugin]; const plugins = [postcssAssetsPlugin];
if (prod) { if (prod) {
plugins.unshift( plugins.unshift(
postcssPresetEnv({ postcssPresetEnv({
browsers: ["> 0.1%"], browsers: ["> 0.1%"],
}) })
); );
plugins.push( plugins.push(
cssMqpacker({ cssMqpacker({
sort: true, sort: true,
}), }),
cssnano({ cssnano({
preset: [ preset: [
"advanced", "advanced",
{ {
cssDeclarationSorter: false, cssDeclarationSorter: false,
discardUnused: true, discardUnused: true,
mergeIdents: false, mergeIdents: false,
reduceIdents: true, reduceIdents: true,
zindex: true, zindex: true,
}, },
], ],
}), }),
postcssRoundSubpixels() postcssRoundSubpixels()
); );
} }
return plugins; return plugins;
}; };
// Performs linting on css // Performs linting on css
export function lint() { export function lint() {
return gulp return gulp
.src(["../src/css/**/*.scss"]) .src(["../src/css/**/*.scss"])
.pipe(gulpSassLint({ configFile: ".sasslint.yml" })) .pipe(gulpSassLint({ configFile: ".sasslint.yml" }))
.pipe(gulpSassLint.format()) .pipe(gulpSassLint.format())
.pipe(gulpSassLint.failOnError()); .pipe(gulpSassLint.failOnError());
} }
function resourcesTask({ isProd }) { function resourcesTask({ isProd }) {
return gulp return gulp
.src("../src/css/main.scss") .src("../src/css/main.scss")
.pipe(gulpPlumber()) .pipe(gulpPlumber())
.pipe(gulpDartSass.sync().on("error", gulpDartSass.logError)) .pipe(gulpDartSass.sync().on("error", gulpDartSass.logError))
.pipe( .pipe(
gulpPostcss([ gulpPostcss([
postcssCriticalSplit({ postcssCriticalSplit({
blockTag: "@load-async", blockTag: "@load-async",
}), }),
]) ])
) )
.pipe(gulpRename("async-resources.css")) .pipe(gulpRename("async-resources.css"))
.pipe(gulpPostcss(postcssPlugins(isProd))) .pipe(gulpPostcss(postcssPlugins(isProd)))
.pipe(gulp.dest(buildFolder)); .pipe(gulp.dest(buildFolder));
} }
export const resources = { export const resources = {
// Builds the css resources // Builds the css resources
dev: () => resourcesTask({ isProd: false }), dev: () => resourcesTask({ isProd: false }),
// Builds the css resources in prod (=minified) // Builds the css resources in prod (=minified)
prod: () => resourcesTask({ isProd: true }), prod: () => resourcesTask({ isProd: true }),
}; };
function mainTask({ isProd }) { function mainTask({ isProd }) {
return gulp return gulp
.src("../src/css/main.scss") .src("../src/css/main.scss")
.pipe(gulpPlumber()) .pipe(gulpPlumber())
.pipe(gulpDartSass.sync().on("error", gulpDartSass.logError)) .pipe(gulpDartSass.sync().on("error", gulpDartSass.logError))
.pipe( .pipe(
gulpPostcss([ gulpPostcss([
postcssCriticalSplit({ postcssCriticalSplit({
blockTag: "@load-async", blockTag: "@load-async",
output: "rest", output: "rest",
}), }),
]) ])
) )
.pipe(gulpPostcss(postcssPlugins(isProd))) .pipe(gulpPostcss(postcssPlugins(isProd)))
.pipe(gulp.dest(buildFolder)); .pipe(gulp.dest(buildFolder));
} }
export const main = { export const main = {
// Builds the css main // Builds the css main
dev: () => mainTask({ isProd: false }), dev: () => mainTask({ isProd: false }),
// Builds the css main in prod (=minified) // Builds the css main in prod (=minified)
prod: () => mainTask({ isProd: true }), prod: () => mainTask({ isProd: true }),
}; };
export const dev = gulp.parallel(main.dev, resources.dev); export const dev = gulp.parallel(main.dev, resources.dev);
export const prod = gulp.parallel(main.prod, resources.prod); export const prod = gulp.parallel(main.prod, resources.prod);

46
gulp/gulpfile.js
View File

@ -1,23 +1,23 @@
import gulp from "gulp"; import gulp from "gulp";
import * as tasks from "./tasks.js"; import * as tasks from "./tasks.js";
/** /**
* @typedef {import("gulp").TaskFunction} TaskFunction * @typedef {import("gulp").TaskFunction} TaskFunction
* @typedef {TaskFunction | { [k: string]: Tasks }} Tasks * @typedef {TaskFunction | { [k: string]: Tasks }} Tasks
*/ */
/** /**
* @param {Tasks} tasks * @param {Tasks} tasks
* @param {string=} prefix * @param {string=} prefix
*/ */
function register(tasks, prefix) { function register(tasks, prefix) {
if (tasks instanceof Function) { if (tasks instanceof Function) {
gulp.task(prefix, tasks); gulp.task(prefix, tasks);
return; return;
} }
for (const [k, v] of Object.entries(tasks)) { for (const [k, v] of Object.entries(tasks)) {
register(v, prefix == null ? k : `${prefix}.${k}`); register(v, prefix == null ? k : `${prefix}.${k}`);
} }
} }
register(tasks); register(tasks);

216
gulp/html.js
View File

@ -1,108 +1,108 @@
import { getRevision } from "./buildutils.js"; import { getRevision } from "./buildutils.js";
import fs from "fs"; import fs from "fs";
import path from "path/posix"; import path from "path/posix";
import crypto from "crypto"; import crypto from "crypto";
import gulp from "gulp"; import gulp from "gulp";
import { buildFolder } from "./config.js"; import { buildFolder } from "./config.js";
import gulpDom from "gulp-dom"; import gulpDom from "gulp-dom";
import gulpHtmlmin from "gulp-htmlmin"; import gulpHtmlmin from "gulp-htmlmin";
import gulpHtmlBeautify from "gulp-html-beautify"; import gulpHtmlBeautify from "gulp-html-beautify";
import gulpRename from "gulp-rename"; import gulpRename from "gulp-rename";
function computeIntegrityHash(fullPath, algorithm = "sha256") { function computeIntegrityHash(fullPath, algorithm = "sha256") {
const file = fs.readFileSync(fullPath); const file = fs.readFileSync(fullPath);
const hash = crypto.createHash(algorithm).update(file).digest("base64"); const hash = crypto.createHash(algorithm).update(file).digest("base64");
return algorithm + "-" + hash; return algorithm + "-" + hash;
} }
/** /**
* PROVIDES * PROVIDES
* *
* html.dev * html.dev
* html.prod * html.prod
*/ */
const commitHash = getRevision(); const commitHash = getRevision();
async function buildHtml({ integrity = true }) { async function buildHtml({ integrity = true }) {
return gulp return gulp
.src("../src/html/index.html") .src("../src/html/index.html")
.pipe( .pipe(
gulpDom( gulpDom(
/** @this {Document} **/ function () { /** @this {Document} **/ function () {
const document = this; const document = this;
// Append css // Append css
const css = document.createElement("link"); const css = document.createElement("link");
css.rel = "stylesheet"; css.rel = "stylesheet";
css.type = "text/css"; css.type = "text/css";
css.media = "none"; css.media = "none";
css.setAttribute("onload", "this.media='all'"); css.setAttribute("onload", "this.media='all'");
css.href = "main.css"; css.href = "main.css";
if (integrity) { if (integrity) {
css.setAttribute( css.setAttribute(
"integrity", "integrity",
computeIntegrityHash(path.join(buildFolder, "main.css")) computeIntegrityHash(path.join(buildFolder, "main.css"))
); );
} }
document.head.appendChild(css); document.head.appendChild(css);
let fontCss = ` let fontCss = `
@font-face { @font-face {
font-family: "GameFont"; font-family: "GameFont";
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-display: swap; font-display: swap;
src: url('res/fonts/GameFont.woff2') format("woff2"); src: url('res/fonts/GameFont.woff2') format("woff2");
} }
`; `;
let loadingCss = let loadingCss =
fontCss + fs.readFileSync(path.join("preloader", "preloader.css")).toString(); fontCss + fs.readFileSync(path.join("preloader", "preloader.css")).toString();
const style = document.createElement("style"); const style = document.createElement("style");
style.setAttribute("type", "text/css"); style.setAttribute("type", "text/css");
style.textContent = loadingCss; style.textContent = loadingCss;
document.head.appendChild(style); document.head.appendChild(style);
let bodyContent = fs.readFileSync(path.join("preloader", "preloader.html")).toString(); let bodyContent = fs.readFileSync(path.join("preloader", "preloader.html")).toString();
const bundleScript = document.createElement("script"); const bundleScript = document.createElement("script");
bundleScript.type = "text/javascript"; bundleScript.type = "text/javascript";
bundleScript.src = "bundle.js"; bundleScript.src = "bundle.js";
if (integrity) { if (integrity) {
bundleScript.setAttribute( bundleScript.setAttribute(
"integrity", "integrity",
computeIntegrityHash(path.join(buildFolder, "bundle.js")) computeIntegrityHash(path.join(buildFolder, "bundle.js"))
); );
} }
document.head.appendChild(bundleScript); document.head.appendChild(bundleScript);
document.body.innerHTML = bodyContent; document.body.innerHTML = bodyContent;
} }
) )
) )
.pipe( .pipe(
gulpHtmlmin({ gulpHtmlmin({
caseSensitive: true, caseSensitive: true,
collapseBooleanAttributes: true, collapseBooleanAttributes: true,
collapseInlineTagWhitespace: true, collapseInlineTagWhitespace: true,
collapseWhitespace: true, collapseWhitespace: true,
preserveLineBreaks: true, preserveLineBreaks: true,
minifyJS: true, minifyJS: true,
minifyCSS: true, minifyCSS: true,
quoteCharacter: '"', quoteCharacter: '"',
useShortDoctype: true, useShortDoctype: true,
}) })
) )
.pipe(gulpHtmlBeautify()) .pipe(gulpHtmlBeautify())
.pipe(gulpRename("index.html")) .pipe(gulpRename("index.html"))
.pipe(gulp.dest(buildFolder)); .pipe(gulp.dest(buildFolder));
} }
export const dev = () => export const dev = () =>
buildHtml({ buildHtml({
integrity: false, integrity: false,
}); });
export const prod = () => export const prod = () =>
buildHtml({ buildHtml({
integrity: true, integrity: true,
}); });

364
gulp/image-resources.js
View File

@ -1,182 +1,182 @@
import fs from "fs/promises"; import fs from "fs/promises";
import path from "path/posix"; import path from "path/posix";
import gulp from "gulp"; import gulp from "gulp";
import { buildFolder } from "./config.js"; import { buildFolder } from "./config.js";
import atlas2Json from "./atlas2json.js"; import atlas2Json from "./atlas2json.js";
import childProcess from "child_process"; import childProcess from "child_process";
import { promisify } from "util"; import { promisify } from "util";
const exec = promisify(childProcess.exec); const exec = promisify(childProcess.exec);
const execute = command => { const execute = command => {
const promise = exec(command, { const promise = exec(command, {
encoding: "utf-8", encoding: "utf-8",
}); });
promise.child.stderr.pipe(process.stderr); promise.child.stderr.pipe(process.stderr);
return promise; return promise;
}; };
import gulpImagemin from "gulp-imagemin"; import gulpImagemin from "gulp-imagemin";
import imageminJpegtran from "imagemin-jpegtran"; import imageminJpegtran from "imagemin-jpegtran";
import imageminGifsicle from "imagemin-gifsicle"; import imageminGifsicle from "imagemin-gifsicle";
import imageminPngquant from "imagemin-pngquant"; import imageminPngquant from "imagemin-pngquant";
import gulpIf from "gulp-if"; import gulpIf from "gulp-if";
import gulpCached from "gulp-cached"; import gulpCached from "gulp-cached";
import gulpClean from "gulp-clean"; import gulpClean from "gulp-clean";
import { nonImageResourcesGlobs, imageResourcesGlobs } from "./config.js"; import { nonImageResourcesGlobs, imageResourcesGlobs } from "./config.js";
// Link to download LibGDX runnable-texturepacker.jar // Link to download LibGDX runnable-texturepacker.jar
const runnableTPSource = const runnableTPSource =
"https://libgdx-nightlies.s3.eu-central-1.amazonaws.com/libgdx-runnables/runnable-texturepacker.jar"; "https://libgdx-nightlies.s3.eu-central-1.amazonaws.com/libgdx-runnables/runnable-texturepacker.jar";
// Lossless options // Lossless options
const minifyImagesOptsLossless = () => [ const minifyImagesOptsLossless = () => [
imageminJpegtran({ imageminJpegtran({
progressive: true, progressive: true,
}), }),
gulpImagemin.svgo({}), gulpImagemin.svgo({}),
gulpImagemin.optipng({ gulpImagemin.optipng({
optimizationLevel: 3, optimizationLevel: 3,
}), }),
imageminGifsicle({ imageminGifsicle({
optimizationLevel: 3, optimizationLevel: 3,
colors: 128, colors: 128,
}), }),
]; ];
// Lossy options // Lossy options
const minifyImagesOpts = () => [ const minifyImagesOpts = () => [
gulpImagemin.mozjpeg({ gulpImagemin.mozjpeg({
quality: 80, quality: 80,
maxMemory: 1024 * 1024 * 8, maxMemory: 1024 * 1024 * 8,
}), }),
gulpImagemin.svgo({}), gulpImagemin.svgo({}),
imageminPngquant({ imageminPngquant({
speed: 1, speed: 1,
strip: true, strip: true,
quality: [0.65, 0.9], quality: [0.65, 0.9],
dithering: false, dithering: false,
verbose: false, verbose: false,
}), }),
gulpImagemin.optipng({ gulpImagemin.optipng({
optimizationLevel: 3, optimizationLevel: 3,
}), }),
imageminGifsicle({ imageminGifsicle({
optimizationLevel: 3, optimizationLevel: 3,
colors: 128, colors: 128,
}), }),
]; ];
// Where the resources folder are // Where the resources folder are
const resourcesDestFolder = path.join(buildFolder, "res"); const resourcesDestFolder = path.join(buildFolder, "res");
/** /**
* Determines if an atlas must use lossless compression * Determines if an atlas must use lossless compression
* @param {string} fname * @param {string} fname
*/ */
function fileMustBeLossless(fname) { function fileMustBeLossless(fname) {
return fname.indexOf("lossless") >= 0; return fname.indexOf("lossless") >= 0;
} }
/////////////// ATLAS ///////////////////// /////////////// ATLAS /////////////////////
export async function buildAtlas() { export async function buildAtlas() {
const config = JSON.stringify("../res_raw/atlas.json"); const config = JSON.stringify("../res_raw/atlas.json");
const source = JSON.stringify("../res_raw"); const source = JSON.stringify("../res_raw");
const dest = JSON.stringify("../res_built/atlas"); const dest = JSON.stringify("../res_built/atlas");
try { try {
// First check whether Java is installed // First check whether Java is installed
await execute("java -version"); await execute("java -version");
// Now check and try downloading runnable-texturepacker.jar (22MB) // Now check and try downloading runnable-texturepacker.jar (22MB)
try { try {
await fs.access("./runnable-texturepacker.jar"); await fs.access("./runnable-texturepacker.jar");
} catch { } catch {
const escapedLink = JSON.stringify(runnableTPSource); const escapedLink = JSON.stringify(runnableTPSource);
try { try {
execute(`curl -o runnable-texturepacker.jar ${escapedLink}`); execute(`curl -o runnable-texturepacker.jar ${escapedLink}`);
} catch { } catch {
throw new Error("Failed to download runnable-texturepacker.jar!"); throw new Error("Failed to download runnable-texturepacker.jar!");
} }
} }
await execute(`java -jar runnable-texturepacker.jar ${source} ${dest} atlas0 ${config}`); await execute(`java -jar runnable-texturepacker.jar ${source} ${dest} atlas0 ${config}`);
} catch { } catch {
console.warn("Building atlas failed. Java not found / unsupported version?"); console.warn("Building atlas failed. Java not found / unsupported version?");
} }
} }
// Converts .atlas LibGDX files to JSON // Converts .atlas LibGDX files to JSON
export async function atlasToJson() { export async function atlasToJson() {
atlas2Json("../res_built/atlas"); atlas2Json("../res_built/atlas");
} }
// Copies the atlas to the final destination // Copies the atlas to the final destination
export function atlas() { export function atlas() {
return gulp.src(["../res_built/atlas/*.png"]).pipe(gulp.dest(resourcesDestFolder)); return gulp.src(["../res_built/atlas/*.png"]).pipe(gulp.dest(resourcesDestFolder));
} }
// Copies the atlas to the final destination after optimizing it (lossy compression) // Copies the atlas to the final destination after optimizing it (lossy compression)
export function atlasOptimized() { export function atlasOptimized() {
return gulp return gulp
.src(["../res_built/atlas/*.png"]) .src(["../res_built/atlas/*.png"])
.pipe( .pipe(
gulpIf( gulpIf(
fname => fileMustBeLossless(fname.history[0]), fname => fileMustBeLossless(fname.history[0]),
gulpImagemin(minifyImagesOptsLossless()), gulpImagemin(minifyImagesOptsLossless()),
gulpImagemin(minifyImagesOpts()) gulpImagemin(minifyImagesOpts())
) )
) )
.pipe(gulp.dest(resourcesDestFolder)); .pipe(gulp.dest(resourcesDestFolder));
} }
//////////////////// RESOURCES ////////////////////// //////////////////// RESOURCES //////////////////////
// Copies all resources which are no ui resources // Copies all resources which are no ui resources
export function copyNonImageResources() { export function copyNonImageResources() {
return gulp.src(nonImageResourcesGlobs).pipe(gulp.dest(resourcesDestFolder)); return gulp.src(nonImageResourcesGlobs).pipe(gulp.dest(resourcesDestFolder));
} }
// Copies all ui resources // Copies all ui resources
export function copyImageResources() { export function copyImageResources() {
return gulp return gulp
.src(imageResourcesGlobs) .src(imageResourcesGlobs)
.pipe(gulpCached("imgres.copyImageResources")) .pipe(gulpCached("imgres.copyImageResources"))
.pipe(gulp.dest(path.join(resourcesDestFolder))); .pipe(gulp.dest(path.join(resourcesDestFolder)));
} }
// Copies all ui resources and optimizes them // Copies all ui resources and optimizes them
export function copyImageResourcesOptimized() { export function copyImageResourcesOptimized() {
return gulp return gulp
.src(imageResourcesGlobs) .src(imageResourcesGlobs)
.pipe( .pipe(
gulpIf( gulpIf(
fname => fileMustBeLossless(fname.history[0]), fname => fileMustBeLossless(fname.history[0]),
gulpImagemin(minifyImagesOptsLossless()), gulpImagemin(minifyImagesOptsLossless()),
gulpImagemin(minifyImagesOpts()) gulpImagemin(minifyImagesOpts())
) )
) )
.pipe(gulp.dest(path.join(resourcesDestFolder))); .pipe(gulp.dest(path.join(resourcesDestFolder)));
} }
// Copies all resources and optimizes them // Copies all resources and optimizes them
export const allOptimized = gulp.parallel( export const allOptimized = gulp.parallel(
gulp.series(buildAtlas, atlasToJson, atlasOptimized), gulp.series(buildAtlas, atlasToJson, atlasOptimized),
copyNonImageResources, copyNonImageResources,
copyImageResourcesOptimized copyImageResourcesOptimized
); );
// Cleans up unused images which are instead inline into the css // Cleans up unused images which are instead inline into the css
export function cleanupUnusedCssInlineImages() { export function cleanupUnusedCssInlineImages() {
return gulp return gulp
.src( .src(
[ [
path.join(buildFolder, "res", "ui", "**", "*.png"), path.join(buildFolder, "res", "ui", "**", "*.png"),
path.join(buildFolder, "res", "ui", "**", "*.jpg"), path.join(buildFolder, "res", "ui", "**", "*.jpg"),
path.join(buildFolder, "res", "ui", "**", "*.svg"), path.join(buildFolder, "res", "ui", "**", "*.svg"),
path.join(buildFolder, "res", "ui", "**", "*.gif"), path.join(buildFolder, "res", "ui", "**", "*.gif"),
], ],
{ read: false } { read: false }
) )
.pipe(gulpIf(fname => fname.history[0].indexOf("noinline") < 0, gulpClean({ force: true }))); .pipe(gulpIf(fname => fname.history[0].indexOf("noinline") < 0, gulpClean({ force: true })));
} }

40
gulp/translations.js
View File

@ -1,20 +1,20 @@
import path from "path/posix"; import path from "path/posix";
import fs from "fs/promises"; import fs from "fs/promises";
import YAML from "yaml"; import YAML from "yaml";
import gulp from "gulp"; import gulp from "gulp";
import gulpPlumber from "gulp-plumber"; import gulpPlumber from "gulp-plumber";
import gulpYaml from "gulp-yaml"; import gulpYaml from "gulp-yaml";
const translationsSourceDir = path.join("..", "translations"); const translationsSourceDir = path.join("..", "translations");
const translationsJsonDir = path.join("..", "src", "js", "built-temp"); const translationsJsonDir = path.join("..", "src", "js", "built-temp");
export function convertToJson() { export function convertToJson() {
return gulp return gulp
.src(path.join(translationsSourceDir, "*.yaml")) .src(path.join(translationsSourceDir, "*.yaml"))
.pipe(gulpPlumber()) .pipe(gulpPlumber())
.pipe(gulpYaml({ space: 2, safe: true })) .pipe(gulpYaml({ space: 2, safe: true }))
.pipe(gulp.dest(translationsJsonDir)); .pipe(gulp.dest(translationsJsonDir));
} }
export const fullBuild = convertToJson; export const fullBuild = convertToJson;