102 lines
3.3 KiB
JavaScript
102 lines
3.3 KiB
JavaScript
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($.cssbeautify())
|
|
.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($.cssbeautify())
|
|
.pipe(gulp.dest(buildFolder))
|
|
);
|
|
});
|
|
}
|
|
|
|
module.exports = {
|
|
gulptasksCSS,
|
|
};
|