Gulp combined task which compiles different SCSS files - css

Question

I'm working on a process similar to the one described in https://nystudio107.com/blog/a-better-package-json-for-the-frontend but want to modify it to be able to compile different SCSS files to CSS files of the same name, e.g. fileA.scss compiles to fileA.css.
What I have at the moment works fine if I'm just working with one SCSS file master.scss compiling to site.combined.min.css.
From package.json
"paths": {
"src": {
"base": "./src/",
"css": "",
"img": "./src/img/",
"js": "./src/js/",
"scss": "./src/scss/"
},
"dist": {
"base": "./public/",
"css": "./public/assets/css/",
"js": "./public/assets/js/",
"fonts": "./public/assets/fonts/",
"img": "./public/assets/img/"
},
"build": {
"base": "./build/",
"css": "./build/css/",
"js": "./build/js/",
"html": "./build/html/",
"img": "./build/img/"
},
"tailwindcss": {
"src": "./build/css/master.css",
"conf": "./tailwind.config.js"
},
"scss": [
{
"src": "./src/scss/master.scss"
}
],
"templates": "./public/site/templates/"
},
"vars": {
"siteCssName": "site.combined.min.css",
"scssName": "master.scss",
"cssName": "master.css"
},
"globs": {
"distCss": [
"./node_modules/normalize.css/normalize.css",
"./build/css/*.css"
],
"purgecss": [
"./html/index.html",
"./html/site/templates/**/*.{twig}",
"./src/js/site.js",
"./html/assets/js/*.js"
],
"purgecssWhitelist": []
},
And the Gulp tasks
gulp.task("scss", () => {
$.fancyLog("-> Compiling scss");
// return gulp.src(pkg.paths.src.scss + pkg.vars.scssName)
return gulp.src(pkg.paths.src.scss + '*.scss')
.pipe($.plumber({errorHandler: onError}))
.pipe($.sourcemaps.init({loadMaps: true}))
.pipe($.sass({
includePaths: pkg.paths.scss
})
.on("error", $.sass.logError))
.pipe($.cached("sass_compile"))
.pipe($.autoprefixer())
.pipe($.sourcemaps.write("./"))
.pipe($.size({gzip: true, showFiles: true}))
.pipe(gulp.dest(pkg.paths.build.css));
});
gulp.task("tailwind", () => {
$.fancyLog("-> Compiling tailwind css");
return gulp.src(pkg.paths.tailwindcss.src)
.pipe($.postcss([
$.tailwindcss(pkg.paths.tailwindcss.conf),
require("autoprefixer"),
]))
.pipe($.if(process.env.NODE_ENV === "production",
$.purgecss({
extractors: [{
extractor: TailwindExtractor,
extensions: ["twig", "scss", "css", "js"]
}],
whitelist: pkg.globs.purgecssWhitelist,
content: pkg.globs.purgecss
})
))
.pipe(gulp.dest(pkg.paths.build.css));
});
class TailwindExtractor {
static extract(content) {
return content.match(/[A-z0-9-:\/]+/g);
}
}
gulp.task("css", ["tailwind", "scss"], () => {
$.fancyLog("-> Building css");
return gulp.src(pkg.globs.distCss)
.pipe($.plumber({errorHandler: onError}))
.pipe($.newer({dest: pkg.paths.dist.css + pkg.vars.siteCssName}))
.pipe($.print())
.pipe($.sourcemaps.init({loadMaps: true}))
.pipe($.concat(pkg.vars.siteCssName))
.pipe($.if(process.env.NODE_ENV === "production",
$.cssnano({
discardComments: {
removeAll: true
},
discardDuplicates: true,
discardEmpty: true,
minifyFontValues: true,
minifySelectors: true
})
))
.pipe($.header(banner, {pkg: pkg}))
.pipe($.sourcemaps.write("./"))
.pipe($.size({gzip: true, showFiles: true}))
.pipe(gulp.dest(pkg.paths.dist.css))
.pipe($.filter("**/*.css"))
.pipe($.livereload());
});
You can see I've replaced the 3rd line of the scss task so that it will deal with multiple sources and output multiple files to the build folder.
But what I'm getting stuck on is how does the tailwind task then know to use the file with the same name as used in the scss task and when it gets to the css task, how does it know not to use all the CSS files in the build folder, but only the one used in the previous tasks?
Is there a way of passing the file name to be used from one task to the next? Or should it be done a different way?

Answer 1

Instead of outputting the compiled scss into pkg.paths.build.css, you could output that into a different folder (ie ./build/scss/), and set that folder as your pkg.paths.tailwind.src?
Alternatively, you could try setting pkg.paths.tailwind.src to be an array of named files, like
"tailwindcss": {
"src":[pkg.paths.build.css + "fileA.css", pkg.paths.build.css + "fileB.css"],
"conf": "./tailwind.config.js"
},
Either way, it will depend on how the PostCSS part of the tailwind task handles being passed multiple files..

Answer 2

It turns out I was closer than I thought. The only changes I needed to make were in the css task.
return gulp.src(pkg.globs.distCss) became return gulp.src(pkg.paths.build.css + '**/*.css')
.pipe($.newer({dest: pkg.paths.dist.css + pkg.vars.siteCssName})) became .pipe($.newer({dest: pkg.paths.dist.css}))
and I removed .pipe($.concat(pkg.vars.siteCssName)) as I wasn't combining multiple CSS files anymore anyway.
This now saves a CSS file to the build folder with the same filename as the original SCSS file, and then it's compiled and saved to the dist folder, again with the same file name.