mirror of
https://github.com/tobspr/shapez.io.git
synced 2026-03-02 03:39:21 +00:00
Load css resources async, improve building descriptions
This commit is contained in:
tobspr
234
gulp/css.js
234
gulp/css.js
@@ -1,99 +1,135 @@
|
||||
const path = require("path");
|
||||
const buildUtils = require("./buildutils");
|
||||
|
||||
function gulptasksCSS($, gulp, buildFolder, browserSync) {
|
||||
// The assets plugin copies the files
|
||||
const commitHash = buildUtils.getRevision();
|
||||
const postcssAssetsPlugin = cachebust =>
|
||||
$.postcssAssets({
|
||||
loadPaths: [path.join(buildFolder, "res", "ui")],
|
||||
basePath: buildFolder,
|
||||
baseUrl: ".",
|
||||
cachebuster: cachebust
|
||||
? (filePath, urlPathname) => ({
|
||||
pathname: buildUtils.cachebust(urlPathname, commitHash),
|
||||
})
|
||||
: "",
|
||||
});
|
||||
|
||||
// Postcss configuration
|
||||
const postcssPlugins = (prod, { cachebust = false }) => {
|
||||
const plugins = [postcssAssetsPlugin(cachebust)];
|
||||
if (prod) {
|
||||
plugins.unshift(
|
||||
$.postcssUnprefix(),
|
||||
$.postcssPresetEnv({
|
||||
browsers: ["> 0.1%"],
|
||||
})
|
||||
);
|
||||
|
||||
plugins.push(
|
||||
$.cssMqpacker({
|
||||
sort: true,
|
||||
}),
|
||||
$.cssnano({
|
||||
preset: [
|
||||
"advanced",
|
||||
{
|
||||
cssDeclarationSorter: false,
|
||||
discardUnused: true,
|
||||
mergeIdents: false,
|
||||
reduceIdents: true,
|
||||
zindex: true,
|
||||
},
|
||||
],
|
||||
}),
|
||||
$.postcssRoundSubpixels()
|
||||
);
|
||||
}
|
||||
return plugins;
|
||||
};
|
||||
|
||||
// Performs linting on css
|
||||
gulp.task("css.lint", () => {
|
||||
return gulp
|
||||
.src(["../src/css/**/*.scss"])
|
||||
.pipe($.sassLint({ configFile: ".sasslint.yml" }))
|
||||
.pipe($.sassLint.format())
|
||||
.pipe($.sassLint.failOnError());
|
||||
});
|
||||
|
||||
// Builds the css in dev mode
|
||||
gulp.task("css.dev", () => {
|
||||
return gulp
|
||||
.src(["../src/css/main.scss"])
|
||||
.pipe($.plumber())
|
||||
.pipe($.sass.sync().on("error", $.sass.logError))
|
||||
.pipe($.postcss(postcssPlugins(false, {})))
|
||||
.pipe(gulp.dest(buildFolder))
|
||||
.pipe(browserSync.stream());
|
||||
});
|
||||
|
||||
// Builds the css in production mode (=minified)
|
||||
gulp.task("css.prod", () => {
|
||||
return (
|
||||
gulp
|
||||
.src("../src/css/main.scss", { cwd: __dirname })
|
||||
.pipe($.plumber())
|
||||
.pipe($.sass.sync({ outputStyle: "compressed" }).on("error", $.sass.logError))
|
||||
.pipe($.postcss(postcssPlugins(true, { cachebust: true })))
|
||||
.pipe(gulp.dest(buildFolder))
|
||||
);
|
||||
});
|
||||
|
||||
// Builds the css in production mode (=minified), without cachebusting
|
||||
gulp.task("css.prod-standalone", () => {
|
||||
return (
|
||||
gulp
|
||||
.src("../src/css/main.scss", { cwd: __dirname })
|
||||
.pipe($.plumber())
|
||||
.pipe($.sass.sync({ outputStyle: "compressed" }).on("error", $.sass.logError))
|
||||
.pipe($.postcss(postcssPlugins(true, { cachebust: false })))
|
||||
.pipe(gulp.dest(buildFolder))
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
gulptasksCSS,
|
||||
};
|
||||
const path = require("path");
|
||||
const buildUtils = require("./buildutils");
|
||||
|
||||
function gulptasksCSS($, gulp, buildFolder, browserSync) {
|
||||
// The assets plugin copies the files
|
||||
const commitHash = buildUtils.getRevision();
|
||||
const postcssAssetsPlugin = cachebust =>
|
||||
$.postcssAssets({
|
||||
loadPaths: [path.join(buildFolder, "res", "ui")],
|
||||
basePath: buildFolder,
|
||||
baseUrl: ".",
|
||||
cachebuster: cachebust
|
||||
? (filePath, urlPathname) => ({
|
||||
pathname: buildUtils.cachebust(urlPathname, commitHash),
|
||||
})
|
||||
: "",
|
||||
});
|
||||
|
||||
// Postcss configuration
|
||||
const postcssPlugins = (prod, { cachebust = false }) => {
|
||||
const plugins = [postcssAssetsPlugin(cachebust)];
|
||||
if (prod) {
|
||||
plugins.unshift(
|
||||
$.postcssUnprefix(),
|
||||
$.postcssPresetEnv({
|
||||
browsers: ["> 0.1%"],
|
||||
})
|
||||
);
|
||||
|
||||
plugins.push(
|
||||
$.cssMqpacker({
|
||||
sort: true,
|
||||
}),
|
||||
$.cssnano({
|
||||
preset: [
|
||||
"advanced",
|
||||
{
|
||||
cssDeclarationSorter: false,
|
||||
discardUnused: true,
|
||||
mergeIdents: false,
|
||||
reduceIdents: true,
|
||||
zindex: true,
|
||||
},
|
||||
],
|
||||
}),
|
||||
$.postcssRoundSubpixels()
|
||||
);
|
||||
}
|
||||
return plugins;
|
||||
};
|
||||
|
||||
// Performs linting on css
|
||||
gulp.task("css.lint", () => {
|
||||
return gulp
|
||||
.src(["../src/css/**/*.scss"])
|
||||
.pipe($.sassLint({ configFile: ".sasslint.yml" }))
|
||||
.pipe($.sassLint.format())
|
||||
.pipe($.sassLint.failOnError());
|
||||
});
|
||||
|
||||
function resourcesTask({ cachebust, isProd }) {
|
||||
return gulp
|
||||
.src("../src/css/main.scss", { cwd: __dirname })
|
||||
.pipe($.plumber())
|
||||
.pipe($.sass.sync().on("error", $.sass.logError))
|
||||
.pipe(
|
||||
$.postcss([
|
||||
$.postcssCriticalSplit({
|
||||
blockTag: "@load-async",
|
||||
}),
|
||||
])
|
||||
)
|
||||
.pipe($.rename("async-resources.css"))
|
||||
.pipe($.postcss(postcssPlugins(isProd, { cachebust })))
|
||||
.pipe(gulp.dest(buildFolder));
|
||||
}
|
||||
|
||||
// Builds the css resources
|
||||
gulp.task("css.resources.dev", () => {
|
||||
return resourcesTask({ cachebust: false, isProd: false });
|
||||
});
|
||||
|
||||
// Builds the css resources in prod (=minified)
|
||||
gulp.task("css.resources.prod", () => {
|
||||
return resourcesTask({ cachebust: true, isProd: true });
|
||||
});
|
||||
|
||||
// Builds the css resources in prod (=minified), without cachebusting
|
||||
gulp.task("css.resources.prod-standalone", () => {
|
||||
return resourcesTask({ cachebust: false, isProd: true });
|
||||
});
|
||||
|
||||
function mainTask({ cachebust, isProd }) {
|
||||
return gulp
|
||||
.src("../src/css/main.scss", { cwd: __dirname })
|
||||
.pipe($.plumber())
|
||||
.pipe($.sass.sync().on("error", $.sass.logError))
|
||||
.pipe(
|
||||
$.postcss([
|
||||
$.postcssCriticalSplit({
|
||||
blockTag: "@load-async",
|
||||
output: "rest",
|
||||
}),
|
||||
])
|
||||
)
|
||||
.pipe($.postcss(postcssPlugins(isProd, { cachebust })))
|
||||
.pipe(gulp.dest(buildFolder));
|
||||
}
|
||||
|
||||
// Builds the css main
|
||||
gulp.task("css.main.dev", () => {
|
||||
return mainTask({ cachebust: false, isProd: false });
|
||||
});
|
||||
|
||||
// Builds the css main in prod (=minified)
|
||||
gulp.task("css.main.prod", () => {
|
||||
return mainTask({ cachebust: true, isProd: true });
|
||||
});
|
||||
|
||||
// Builds the css main in prod (=minified), without cachebusting
|
||||
gulp.task("css.main.prod-standalone", () => {
|
||||
return mainTask({ cachebust: false, isProd: true });
|
||||
});
|
||||
|
||||
gulp.task("css.dev", gulp.parallel("css.main.dev", "css.resources.dev"));
|
||||
gulp.task("css.prod", gulp.parallel("css.main.prod", "css.resources.prod"));
|
||||
gulp.task(
|
||||
"css.prod-standalone",
|
||||
gulp.parallel("css.main.prod-standalone", "css.resources.prod-standalone")
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
gulptasksCSS,
|
||||
};
|
||||
|
||||
584
gulp/html.js
584
gulp/html.js
@@ -1,283 +1,301 @@
|
||||
const buildUtils = require("./buildutils");
|
||||
const fs = require("fs");
|
||||
const path = require("path");
|
||||
const crypto = require("crypto");
|
||||
|
||||
function computeIntegrityHash(fullPath, algorithm = "sha256") {
|
||||
const file = fs.readFileSync(fullPath);
|
||||
const hash = crypto.createHash(algorithm).update(file).digest("base64");
|
||||
return algorithm + "-" + hash;
|
||||
}
|
||||
|
||||
function gulptasksHTML($, gulp, buildFolder) {
|
||||
const commitHash = buildUtils.getRevision();
|
||||
async function buildHtml(
|
||||
apiUrl,
|
||||
{ analytics = false, standalone = false, app = false, integrity = true, enableCachebust = true }
|
||||
) {
|
||||
function cachebust(url) {
|
||||
if (enableCachebust) {
|
||||
return buildUtils.cachebust(url, commitHash);
|
||||
}
|
||||
return url;
|
||||
}
|
||||
|
||||
const hasLocalFiles = standalone || app;
|
||||
|
||||
return gulp
|
||||
.src("../src/html/" + (standalone ? "index.standalone.html" : "index.html"))
|
||||
.pipe(
|
||||
$.dom(/** @this {Document} **/ function () {
|
||||
const document = this;
|
||||
|
||||
// Preconnect to api
|
||||
const prefetchLink = document.createElement("link");
|
||||
prefetchLink.rel = "preconnect";
|
||||
prefetchLink.href = apiUrl;
|
||||
prefetchLink.setAttribute("crossorigin", "anonymous");
|
||||
document.head.appendChild(prefetchLink);
|
||||
|
||||
// Append css
|
||||
const css = document.createElement("link");
|
||||
css.rel = "stylesheet";
|
||||
css.type = "text/css";
|
||||
css.media = "none";
|
||||
css.setAttribute("onload", "this.media='all'");
|
||||
css.href = cachebust("main.css");
|
||||
if (integrity) {
|
||||
css.setAttribute(
|
||||
"integrity",
|
||||
computeIntegrityHash(path.join(buildFolder, "main.css"))
|
||||
);
|
||||
}
|
||||
document.head.appendChild(css);
|
||||
|
||||
if (app) {
|
||||
// Append cordova link
|
||||
const cdv = document.createElement("script");
|
||||
cdv.src = "cordova.js";
|
||||
cdv.type = "text/javascript";
|
||||
document.head.appendChild(cdv);
|
||||
}
|
||||
|
||||
// Google analytics
|
||||
if (analytics) {
|
||||
const tagManagerScript = document.createElement("script");
|
||||
tagManagerScript.src = "https://www.googletagmanager.com/gtag/js?id=UA-165342524-1";
|
||||
tagManagerScript.setAttribute("async", "");
|
||||
document.head.appendChild(tagManagerScript);
|
||||
|
||||
const initScript = document.createElement("script");
|
||||
initScript.textContent = `
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'UA-165342524-1', { anonymize_ip: true });
|
||||
`;
|
||||
document.head.appendChild(initScript);
|
||||
|
||||
const abTestingScript = document.createElement("script");
|
||||
abTestingScript.setAttribute(
|
||||
"src",
|
||||
"https://www.googleoptimize.com/optimize.js?id=OPT-M5NHCV7"
|
||||
);
|
||||
abTestingScript.setAttribute("async", "");
|
||||
document.head.appendChild(abTestingScript);
|
||||
}
|
||||
|
||||
// Do not need to preload in app or standalone
|
||||
if (!hasLocalFiles) {
|
||||
// Preload essentials
|
||||
const preloads = ["fonts/GameFont.woff2"];
|
||||
|
||||
preloads.forEach(src => {
|
||||
const preloadLink = document.createElement("link");
|
||||
preloadLink.rel = "preload";
|
||||
preloadLink.href = cachebust("res/" + src);
|
||||
if (src.endsWith(".woff2")) {
|
||||
preloadLink.setAttribute("crossorigin", "anonymous");
|
||||
preloadLink.setAttribute("as", "font");
|
||||
} else {
|
||||
preloadLink.setAttribute("as", "image");
|
||||
}
|
||||
document.head.appendChild(preloadLink);
|
||||
});
|
||||
}
|
||||
|
||||
const loadingSvg = `background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46YXV0bztiYWNrZ3JvdW5kOjAgMCIgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgZGlzcGxheT0iYmxvY2siPjxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzM5Mzc0NyIgc3Ryb2tlLXdpZHRoPSIzIiByPSI0MiIgc3Ryb2tlLWRhc2hhcnJheT0iMTk3LjkyMDMzNzE3NjE1Njk4IDY3Ljk3MzQ0NTcyNTM4NTY2IiB0cmFuc2Zvcm09InJvdGF0ZSg0OC4yNjUgNTAgNTApIj48YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InJvdGF0ZSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGR1cj0iNS41NTU1NTU1NTU1NTU1NTVzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIi8+PC9jaXJjbGU+PC9zdmc+")`;
|
||||
|
||||
const loadingCss = `
|
||||
@font-face {
|
||||
font-family: 'GameFont';
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-display: swap;
|
||||
src: url('${cachebust("res/fonts/GameFont.woff2")}') format('woff2');
|
||||
}
|
||||
|
||||
#ll_fp {
|
||||
font-family: GameFont;
|
||||
font-size: 14px;
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0.05;
|
||||
}
|
||||
|
||||
#ll_p {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
z-index: 99999;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
justify-content:
|
||||
center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#ll_p > div {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
bottom: 40px;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
color: #393747;
|
||||
font-family: 'GameFont', sans-serif;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#ll_p > span {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
display: inline-flex;
|
||||
background: center center / contain no-repeat;
|
||||
${loadingSvg};
|
||||
}
|
||||
`;
|
||||
|
||||
const style = document.createElement("style");
|
||||
style.setAttribute("type", "text/css");
|
||||
style.textContent = loadingCss;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Append loader, but not in standalone (directly include bundle there)
|
||||
if (standalone) {
|
||||
const bundleScript = document.createElement("script");
|
||||
bundleScript.type = "text/javascript";
|
||||
bundleScript.src = "bundle.js";
|
||||
if (integrity) {
|
||||
bundleScript.setAttribute(
|
||||
"integrity",
|
||||
computeIntegrityHash(path.join(buildFolder, "bundle.js"))
|
||||
);
|
||||
}
|
||||
document.head.appendChild(bundleScript);
|
||||
} else {
|
||||
const loadJs = document.createElement("script");
|
||||
loadJs.type = "text/javascript";
|
||||
let scriptContent = "";
|
||||
scriptContent += `var bundleSrc = '${cachebust("bundle.js")}';\n`;
|
||||
scriptContent += `var bundleSrcTranspiled = '${cachebust(
|
||||
"bundle-transpiled.js"
|
||||
)}';\n`;
|
||||
|
||||
if (integrity) {
|
||||
scriptContent +=
|
||||
"var bundleIntegrity = '" +
|
||||
computeIntegrityHash(path.join(buildFolder, "bundle.js")) +
|
||||
"';\n";
|
||||
scriptContent +=
|
||||
"var bundleIntegrityTranspiled = '" +
|
||||
computeIntegrityHash(path.join(buildFolder, "bundle-transpiled.js")) +
|
||||
"';\n";
|
||||
} else {
|
||||
scriptContent += "var bundleIntegrity = null;\n";
|
||||
scriptContent += "var bundleIntegrityTranspiled = null;\n";
|
||||
}
|
||||
|
||||
scriptContent += fs.readFileSync("./bundle-loader.js").toString();
|
||||
loadJs.textContent = scriptContent;
|
||||
document.head.appendChild(loadJs);
|
||||
}
|
||||
|
||||
const bodyContent = `
|
||||
<div id="ll_fp">_</div>
|
||||
<div id="ll_p">
|
||||
<span></span>
|
||||
<div>${hasLocalFiles ? "Loading" : "Downloading"} Game Files</div >
|
||||
</div >
|
||||
`;
|
||||
|
||||
document.body.innerHTML = bodyContent;
|
||||
})
|
||||
)
|
||||
.pipe(
|
||||
$.htmlmin({
|
||||
caseSensitive: true,
|
||||
collapseBooleanAttributes: true,
|
||||
collapseInlineTagWhitespace: true,
|
||||
collapseWhitespace: true,
|
||||
preserveLineBreaks: true,
|
||||
minifyJS: true,
|
||||
minifyCSS: true,
|
||||
quoteCharacter: '"',
|
||||
useShortDoctype: true,
|
||||
})
|
||||
)
|
||||
.pipe($.htmlBeautify())
|
||||
.pipe($.rename("index.html"))
|
||||
.pipe(gulp.dest(buildFolder));
|
||||
}
|
||||
|
||||
gulp.task("html.dev", () => {
|
||||
return buildHtml("http://localhost:5005", {
|
||||
analytics: false,
|
||||
integrity: false,
|
||||
enableCachebust: false,
|
||||
});
|
||||
});
|
||||
|
||||
gulp.task("html.staging", () => {
|
||||
return buildHtml("https://api-staging.shapez.io", {
|
||||
analytics: true,
|
||||
});
|
||||
});
|
||||
|
||||
gulp.task("html.prod", () => {
|
||||
return buildHtml("https://analytics.shapez.io", {
|
||||
analytics: true,
|
||||
});
|
||||
});
|
||||
|
||||
gulp.task("html.standalone-dev", () => {
|
||||
return buildHtml("https://localhost:5005", {
|
||||
analytics: false,
|
||||
standalone: true,
|
||||
integrity: false,
|
||||
enableCachebust: false,
|
||||
});
|
||||
});
|
||||
|
||||
gulp.task("html.standalone-beta", () => {
|
||||
return buildHtml("https://api-staging.shapez.io", {
|
||||
analytics: false,
|
||||
standalone: true,
|
||||
enableCachebust: false,
|
||||
});
|
||||
});
|
||||
|
||||
gulp.task("html.standalone-prod", () => {
|
||||
return buildHtml("https://analytics.shapez.io", {
|
||||
analytics: false,
|
||||
standalone: true,
|
||||
enableCachebust: false,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
gulptasksHTML,
|
||||
};
|
||||
const buildUtils = require("./buildutils");
|
||||
const fs = require("fs");
|
||||
const path = require("path");
|
||||
const crypto = require("crypto");
|
||||
|
||||
function computeIntegrityHash(fullPath, algorithm = "sha256") {
|
||||
const file = fs.readFileSync(fullPath);
|
||||
const hash = crypto.createHash(algorithm).update(file).digest("base64");
|
||||
return algorithm + "-" + hash;
|
||||
}
|
||||
|
||||
function gulptasksHTML($, gulp, buildFolder) {
|
||||
const commitHash = buildUtils.getRevision();
|
||||
async function buildHtml(
|
||||
apiUrl,
|
||||
{ analytics = false, standalone = false, app = false, integrity = true, enableCachebust = true }
|
||||
) {
|
||||
function cachebust(url) {
|
||||
if (enableCachebust) {
|
||||
return buildUtils.cachebust(url, commitHash);
|
||||
}
|
||||
return url;
|
||||
}
|
||||
|
||||
const hasLocalFiles = standalone || app;
|
||||
|
||||
return gulp
|
||||
.src("../src/html/" + (standalone ? "index.standalone.html" : "index.html"))
|
||||
.pipe(
|
||||
$.dom(
|
||||
/** @this {Document} **/ function () {
|
||||
const document = this;
|
||||
|
||||
// Preconnect to api
|
||||
const prefetchLink = document.createElement("link");
|
||||
prefetchLink.rel = "preconnect";
|
||||
prefetchLink.href = apiUrl;
|
||||
prefetchLink.setAttribute("crossorigin", "anonymous");
|
||||
document.head.appendChild(prefetchLink);
|
||||
|
||||
// Append css
|
||||
const css = document.createElement("link");
|
||||
css.rel = "stylesheet";
|
||||
css.type = "text/css";
|
||||
css.media = "none";
|
||||
css.setAttribute("onload", "this.media='all'");
|
||||
css.href = cachebust("main.css");
|
||||
if (integrity) {
|
||||
css.setAttribute(
|
||||
"integrity",
|
||||
computeIntegrityHash(path.join(buildFolder, "main.css"))
|
||||
);
|
||||
}
|
||||
document.head.appendChild(css);
|
||||
|
||||
// Append async css
|
||||
const asyncCss = document.createElement("link");
|
||||
asyncCss.rel = "stylesheet";
|
||||
asyncCss.type = "text/css";
|
||||
asyncCss.media = "none";
|
||||
asyncCss.setAttribute("onload", "this.media='all'");
|
||||
asyncCss.href = cachebust("async-resources.css");
|
||||
if (integrity) {
|
||||
asyncCss.setAttribute(
|
||||
"integrity",
|
||||
computeIntegrityHash(path.join(buildFolder, "async-resources.css"))
|
||||
);
|
||||
}
|
||||
document.head.appendChild(asyncCss);
|
||||
|
||||
if (app) {
|
||||
// Append cordova link
|
||||
const cdv = document.createElement("script");
|
||||
cdv.src = "cordova.js";
|
||||
cdv.type = "text/javascript";
|
||||
document.head.appendChild(cdv);
|
||||
}
|
||||
|
||||
// Google analytics
|
||||
if (analytics) {
|
||||
const tagManagerScript = document.createElement("script");
|
||||
tagManagerScript.src =
|
||||
"https://www.googletagmanager.com/gtag/js?id=UA-165342524-1";
|
||||
tagManagerScript.setAttribute("async", "");
|
||||
document.head.appendChild(tagManagerScript);
|
||||
|
||||
const initScript = document.createElement("script");
|
||||
initScript.textContent = `
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'UA-165342524-1', { anonymize_ip: true });
|
||||
`;
|
||||
document.head.appendChild(initScript);
|
||||
|
||||
const abTestingScript = document.createElement("script");
|
||||
abTestingScript.setAttribute(
|
||||
"src",
|
||||
"https://www.googleoptimize.com/optimize.js?id=OPT-M5NHCV7"
|
||||
);
|
||||
abTestingScript.setAttribute("async", "");
|
||||
document.head.appendChild(abTestingScript);
|
||||
}
|
||||
|
||||
// Do not need to preload in app or standalone
|
||||
if (!hasLocalFiles) {
|
||||
// Preload essentials
|
||||
const preloads = ["fonts/GameFont.woff2"];
|
||||
|
||||
preloads.forEach(src => {
|
||||
const preloadLink = document.createElement("link");
|
||||
preloadLink.rel = "preload";
|
||||
preloadLink.href = cachebust("res/" + src);
|
||||
if (src.endsWith(".woff2")) {
|
||||
preloadLink.setAttribute("crossorigin", "anonymous");
|
||||
preloadLink.setAttribute("as", "font");
|
||||
} else {
|
||||
preloadLink.setAttribute("as", "image");
|
||||
}
|
||||
document.head.appendChild(preloadLink);
|
||||
});
|
||||
}
|
||||
|
||||
const loadingSvg = `background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46YXV0bztiYWNrZ3JvdW5kOjAgMCIgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgZGlzcGxheT0iYmxvY2siPjxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzM5Mzc0NyIgc3Ryb2tlLXdpZHRoPSIzIiByPSI0MiIgc3Ryb2tlLWRhc2hhcnJheT0iMTk3LjkyMDMzNzE3NjE1Njk4IDY3Ljk3MzQ0NTcyNTM4NTY2IiB0cmFuc2Zvcm09InJvdGF0ZSg0OC4yNjUgNTAgNTApIj48YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InJvdGF0ZSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGR1cj0iNS41NTU1NTU1NTU1NTU1NTVzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIi8+PC9jaXJjbGU+PC9zdmc+")`;
|
||||
|
||||
const loadingCss = `
|
||||
@font-face {
|
||||
font-family: 'GameFont';
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-display: swap;
|
||||
src: url('${cachebust("res/fonts/GameFont.woff2")}') format('woff2');
|
||||
}
|
||||
|
||||
#ll_fp {
|
||||
font-family: GameFont;
|
||||
font-size: 14px;
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0.05;
|
||||
}
|
||||
|
||||
#ll_p {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
z-index: 99999;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
justify-content:
|
||||
center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#ll_p > div {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
bottom: 40px;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
color: #393747;
|
||||
font-family: 'GameFont', sans-serif;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#ll_p > span {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
display: inline-flex;
|
||||
background: center center / contain no-repeat;
|
||||
${loadingSvg};
|
||||
}
|
||||
`;
|
||||
|
||||
const style = document.createElement("style");
|
||||
style.setAttribute("type", "text/css");
|
||||
style.textContent = loadingCss;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Append loader, but not in standalone (directly include bundle there)
|
||||
if (standalone) {
|
||||
const bundleScript = document.createElement("script");
|
||||
bundleScript.type = "text/javascript";
|
||||
bundleScript.src = "bundle.js";
|
||||
if (integrity) {
|
||||
bundleScript.setAttribute(
|
||||
"integrity",
|
||||
computeIntegrityHash(path.join(buildFolder, "bundle.js"))
|
||||
);
|
||||
}
|
||||
document.head.appendChild(bundleScript);
|
||||
} else {
|
||||
const loadJs = document.createElement("script");
|
||||
loadJs.type = "text/javascript";
|
||||
let scriptContent = "";
|
||||
scriptContent += `var bundleSrc = '${cachebust("bundle.js")}';\n`;
|
||||
scriptContent += `var bundleSrcTranspiled = '${cachebust(
|
||||
"bundle-transpiled.js"
|
||||
)}';\n`;
|
||||
|
||||
if (integrity) {
|
||||
scriptContent +=
|
||||
"var bundleIntegrity = '" +
|
||||
computeIntegrityHash(path.join(buildFolder, "bundle.js")) +
|
||||
"';\n";
|
||||
scriptContent +=
|
||||
"var bundleIntegrityTranspiled = '" +
|
||||
computeIntegrityHash(path.join(buildFolder, "bundle-transpiled.js")) +
|
||||
"';\n";
|
||||
} else {
|
||||
scriptContent += "var bundleIntegrity = null;\n";
|
||||
scriptContent += "var bundleIntegrityTranspiled = null;\n";
|
||||
}
|
||||
|
||||
scriptContent += fs.readFileSync("./bundle-loader.js").toString();
|
||||
loadJs.textContent = scriptContent;
|
||||
document.head.appendChild(loadJs);
|
||||
}
|
||||
|
||||
const bodyContent = `
|
||||
<div id="ll_fp">_</div>
|
||||
<div id="ll_p">
|
||||
<span></span>
|
||||
<div>${hasLocalFiles ? "Loading" : "Downloading"} Game Files</div >
|
||||
</div >
|
||||
`;
|
||||
|
||||
document.body.innerHTML = bodyContent;
|
||||
}
|
||||
)
|
||||
)
|
||||
.pipe(
|
||||
$.htmlmin({
|
||||
caseSensitive: true,
|
||||
collapseBooleanAttributes: true,
|
||||
collapseInlineTagWhitespace: true,
|
||||
collapseWhitespace: true,
|
||||
preserveLineBreaks: true,
|
||||
minifyJS: true,
|
||||
minifyCSS: true,
|
||||
quoteCharacter: '"',
|
||||
useShortDoctype: true,
|
||||
})
|
||||
)
|
||||
.pipe($.htmlBeautify())
|
||||
.pipe($.rename("index.html"))
|
||||
.pipe(gulp.dest(buildFolder));
|
||||
}
|
||||
|
||||
gulp.task("html.dev", () => {
|
||||
return buildHtml("http://localhost:5005", {
|
||||
analytics: false,
|
||||
integrity: false,
|
||||
enableCachebust: false,
|
||||
});
|
||||
});
|
||||
|
||||
gulp.task("html.staging", () => {
|
||||
return buildHtml("https://api-staging.shapez.io", {
|
||||
analytics: true,
|
||||
});
|
||||
});
|
||||
|
||||
gulp.task("html.prod", () => {
|
||||
return buildHtml("https://analytics.shapez.io", {
|
||||
analytics: true,
|
||||
});
|
||||
});
|
||||
|
||||
gulp.task("html.standalone-dev", () => {
|
||||
return buildHtml("https://localhost:5005", {
|
||||
analytics: false,
|
||||
standalone: true,
|
||||
integrity: false,
|
||||
enableCachebust: false,
|
||||
});
|
||||
});
|
||||
|
||||
gulp.task("html.standalone-beta", () => {
|
||||
return buildHtml("https://api-staging.shapez.io", {
|
||||
analytics: false,
|
||||
standalone: true,
|
||||
enableCachebust: false,
|
||||
});
|
||||
});
|
||||
|
||||
gulp.task("html.standalone-prod", () => {
|
||||
return buildHtml("https://analytics.shapez.io", {
|
||||
analytics: false,
|
||||
standalone: true,
|
||||
enableCachebust: false,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
gulptasksHTML,
|
||||
};
|
||||
|
||||
@@ -1,110 +1,111 @@
|
||||
{
|
||||
"name": "builder",
|
||||
"version": "1.0.0",
|
||||
"description": "builder",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"gulp": "gulp"
|
||||
},
|
||||
"author": "tobspr",
|
||||
"license": "private",
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.9.0",
|
||||
"@babel/plugin-transform-block-scoping": "^7.4.4",
|
||||
"@babel/plugin-transform-classes": "^7.5.5",
|
||||
"@babel/preset-env": "^7.5.4",
|
||||
"@types/cordova": "^0.0.34",
|
||||
"@types/filesystem": "^0.0.29",
|
||||
"@types/node": "^12.7.5",
|
||||
"ajv": "^6.10.2",
|
||||
"audiosprite": "^0.7.2",
|
||||
"babel-loader": "^8.1.0",
|
||||
"browser-sync": "^2.26.10",
|
||||
"circular-dependency-plugin": "^5.0.2",
|
||||
"circular-json": "^0.5.9",
|
||||
"clipboard-copy": "^3.1.0",
|
||||
"colors": "^1.3.3",
|
||||
"core-js": "3",
|
||||
"crypto": "^1.0.1",
|
||||
"cssnano-preset-advanced": "^4.0.7",
|
||||
"delete-empty": "^3.0.0",
|
||||
"email-validator": "^2.0.4",
|
||||
"eslint": "^5.9.0",
|
||||
"fastdom": "^1.0.9",
|
||||
"flatted": "^2.0.1",
|
||||
"fs-extra": "^8.1.0",
|
||||
"gulp-audiosprite": "^1.1.0",
|
||||
"howler": "^2.1.2",
|
||||
"html-loader": "^0.5.5",
|
||||
"ignore-loader": "^0.1.2",
|
||||
"lz-string": "^1.4.4",
|
||||
"markdown-loader": "^5.1.0",
|
||||
"node-sri": "^1.1.1",
|
||||
"phonegap-plugin-mobile-accessibility": "^1.0.5",
|
||||
"promise-polyfill": "^8.1.0",
|
||||
"query-string": "^6.8.1",
|
||||
"rusha": "^0.8.13",
|
||||
"serialize-error": "^3.0.0",
|
||||
"strictdom": "^1.0.1",
|
||||
"string-replace-webpack-plugin": "^0.1.3",
|
||||
"terser-webpack-plugin": "^1.1.0",
|
||||
"through2": "^3.0.1",
|
||||
"uglify-template-string-loader": "^1.1.0",
|
||||
"unused-files-webpack-plugin": "^3.4.0",
|
||||
"webpack": "^4.43.0",
|
||||
"webpack-cli": "^3.1.0",
|
||||
"webpack-deep-scope-plugin": "^1.6.0",
|
||||
"webpack-plugin-replace": "^1.1.1",
|
||||
"webpack-strip-block": "^0.2.0",
|
||||
"whatwg-fetch": "^3.0.0",
|
||||
"worker-loader": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^9.4.3",
|
||||
"babel-plugin-closure-elimination": "^1.3.0",
|
||||
"babel-plugin-console-source": "^2.0.2",
|
||||
"babel-plugin-danger-remove-unused-import": "^1.1.2",
|
||||
"css-mqpacker": "^7.0.0",
|
||||
"cssnano": "^4.1.10",
|
||||
"electron-packager": "^14.0.6",
|
||||
"faster.js": "^1.1.0",
|
||||
"glob": "^7.1.3",
|
||||
"gulp": "^4.0.2",
|
||||
"gulp-cache": "^1.1.3",
|
||||
"gulp-cached": "^1.1.1",
|
||||
"gulp-clean": "^0.4.0",
|
||||
"gulp-dom": "^1.0.0",
|
||||
"gulp-flatten": "^0.4.0",
|
||||
"gulp-fluent-ffmpeg": "^2.0.0",
|
||||
"gulp-html-beautify": "^1.0.1",
|
||||
"gulp-htmlmin": "^5.0.1",
|
||||
"gulp-if": "^3.0.0",
|
||||
"gulp-imagemin": "^7.1.0",
|
||||
"gulp-load-plugins": "^2.0.3",
|
||||
"gulp-phonegap-build": "^0.1.5",
|
||||
"gulp-plumber": "^1.2.1",
|
||||
"gulp-pngquant": "^1.0.13",
|
||||
"gulp-postcss": "^8.0.0",
|
||||
"gulp-rename": "^2.0.0",
|
||||
"gulp-sass": "^4.1.0",
|
||||
"gulp-sass-lint": "^1.4.0",
|
||||
"gulp-sftp": "git+https://git@github.com/webksde/gulp-sftp",
|
||||
"gulp-terser": "^1.2.0",
|
||||
"gulp-webserver": "^0.9.1",
|
||||
"gulp-yaml": "^2.0.4",
|
||||
"imagemin-gifsicle": "^7.0.0",
|
||||
"imagemin-jpegtran": "^7.0.0",
|
||||
"imagemin-pngquant": "^9.0.0",
|
||||
"jimp": "^0.6.1",
|
||||
"js-yaml": "^3.13.1",
|
||||
"postcss-assets": "^5.0.0",
|
||||
"postcss-preset-env": "^6.5.0",
|
||||
"postcss-round-subpixels": "^1.2.0",
|
||||
"postcss-unprefix": "^2.1.3",
|
||||
"sass-unused": "^0.3.0",
|
||||
"strip-json-comments": "^3.0.1",
|
||||
"trim": "^0.0.1",
|
||||
"webpack-stream": "^5.2.1",
|
||||
"yaml-loader": "^0.6.0"
|
||||
}
|
||||
}
|
||||
{
|
||||
"name": "builder",
|
||||
"version": "1.0.0",
|
||||
"description": "builder",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"gulp": "gulp"
|
||||
},
|
||||
"author": "tobspr",
|
||||
"license": "private",
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.9.0",
|
||||
"@babel/plugin-transform-block-scoping": "^7.4.4",
|
||||
"@babel/plugin-transform-classes": "^7.5.5",
|
||||
"@babel/preset-env": "^7.5.4",
|
||||
"@types/cordova": "^0.0.34",
|
||||
"@types/filesystem": "^0.0.29",
|
||||
"@types/node": "^12.7.5",
|
||||
"ajv": "^6.10.2",
|
||||
"audiosprite": "^0.7.2",
|
||||
"babel-loader": "^8.1.0",
|
||||
"browser-sync": "^2.26.10",
|
||||
"circular-dependency-plugin": "^5.0.2",
|
||||
"circular-json": "^0.5.9",
|
||||
"clipboard-copy": "^3.1.0",
|
||||
"colors": "^1.3.3",
|
||||
"core-js": "3",
|
||||
"crypto": "^1.0.1",
|
||||
"cssnano-preset-advanced": "^4.0.7",
|
||||
"delete-empty": "^3.0.0",
|
||||
"email-validator": "^2.0.4",
|
||||
"eslint": "^5.9.0",
|
||||
"fastdom": "^1.0.9",
|
||||
"flatted": "^2.0.1",
|
||||
"fs-extra": "^8.1.0",
|
||||
"gulp-audiosprite": "^1.1.0",
|
||||
"howler": "^2.1.2",
|
||||
"html-loader": "^0.5.5",
|
||||
"ignore-loader": "^0.1.2",
|
||||
"lz-string": "^1.4.4",
|
||||
"markdown-loader": "^5.1.0",
|
||||
"node-sri": "^1.1.1",
|
||||
"phonegap-plugin-mobile-accessibility": "^1.0.5",
|
||||
"promise-polyfill": "^8.1.0",
|
||||
"query-string": "^6.8.1",
|
||||
"rusha": "^0.8.13",
|
||||
"serialize-error": "^3.0.0",
|
||||
"strictdom": "^1.0.1",
|
||||
"string-replace-webpack-plugin": "^0.1.3",
|
||||
"terser-webpack-plugin": "^1.1.0",
|
||||
"through2": "^3.0.1",
|
||||
"uglify-template-string-loader": "^1.1.0",
|
||||
"unused-files-webpack-plugin": "^3.4.0",
|
||||
"webpack": "^4.43.0",
|
||||
"webpack-cli": "^3.1.0",
|
||||
"webpack-deep-scope-plugin": "^1.6.0",
|
||||
"webpack-plugin-replace": "^1.1.1",
|
||||
"webpack-strip-block": "^0.2.0",
|
||||
"whatwg-fetch": "^3.0.0",
|
||||
"worker-loader": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^9.4.3",
|
||||
"babel-plugin-closure-elimination": "^1.3.0",
|
||||
"babel-plugin-console-source": "^2.0.2",
|
||||
"babel-plugin-danger-remove-unused-import": "^1.1.2",
|
||||
"css-mqpacker": "^7.0.0",
|
||||
"cssnano": "^4.1.10",
|
||||
"postcss-critical-split": "^2.5.3",
|
||||
"electron-packager": "^14.0.6",
|
||||
"faster.js": "^1.1.0",
|
||||
"glob": "^7.1.3",
|
||||
"gulp": "^4.0.2",
|
||||
"gulp-cache": "^1.1.3",
|
||||
"gulp-cached": "^1.1.1",
|
||||
"gulp-clean": "^0.4.0",
|
||||
"gulp-dom": "^1.0.0",
|
||||
"gulp-flatten": "^0.4.0",
|
||||
"gulp-fluent-ffmpeg": "^2.0.0",
|
||||
"gulp-html-beautify": "^1.0.1",
|
||||
"gulp-htmlmin": "^5.0.1",
|
||||
"gulp-if": "^3.0.0",
|
||||
"gulp-imagemin": "^7.1.0",
|
||||
"gulp-load-plugins": "^2.0.3",
|
||||
"gulp-phonegap-build": "^0.1.5",
|
||||
"gulp-plumber": "^1.2.1",
|
||||
"gulp-pngquant": "^1.0.13",
|
||||
"gulp-postcss": "^8.0.0",
|
||||
"gulp-rename": "^2.0.0",
|
||||
"gulp-sass": "^4.1.0",
|
||||
"gulp-sass-lint": "^1.4.0",
|
||||
"gulp-sftp": "git+https://git@github.com/webksde/gulp-sftp",
|
||||
"gulp-terser": "^1.2.0",
|
||||
"gulp-webserver": "^0.9.1",
|
||||
"gulp-yaml": "^2.0.4",
|
||||
"imagemin-gifsicle": "^7.0.0",
|
||||
"imagemin-jpegtran": "^7.0.0",
|
||||
"imagemin-pngquant": "^9.0.0",
|
||||
"jimp": "^0.6.1",
|
||||
"js-yaml": "^3.13.1",
|
||||
"postcss-assets": "^5.0.0",
|
||||
"postcss-preset-env": "^6.5.0",
|
||||
"postcss-round-subpixels": "^1.2.0",
|
||||
"postcss-unprefix": "^2.1.3",
|
||||
"sass-unused": "^0.3.0",
|
||||
"strip-json-comments": "^3.0.1",
|
||||
"trim": "^0.0.1",
|
||||
"webpack-stream": "^5.2.1",
|
||||
"yaml-loader": "^0.6.0"
|
||||
}
|
||||
}
|
||||
|
||||
27116
gulp/yarn.lock
27116
gulp/yarn.lock
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user