Archives/tobspr_shapez.io
1
0
Fork 0
mirror of https://github.com/tobspr/shapez.io.git synced 2026-09-28 14:55:41 +00:00
Code Issues Projects Releases Wiki Activity

Load css resources async, improve building descriptions

Browse Source
This commit is contained in:
tobspr
2020-09-23 11:14:35 +02:00
parent 9881bd6799
commit 1f12e755a9
49 changed files with 15779 additions and 15552 deletions
Download Patch File Download Diff File Expand all files Collapse all files

234
gulp/css.js
View File

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