On quite a few projects recently I've been using a front-end tooling approach as described in the excellent article by Andrew Welch of nystudio107, A Gulp Workflow for Frontend Development Automation. I first got drawn to it because I've also been using Tailwind for most of my recent work, and found that Andrew has a repo for a Craft CMS scaffolding project on Github which is aso set up to use Tailwind.
It doesn't matter if your project is using Craft or not, the front-end tooling part can be extracted and used for any type of project. I've used it for sites I've done bulit with Craft, Processwire and ExpressionEngine.
After a bit of wrangling and tweaking, I'd mostly got the Gulp set up working the way I liked it. But there was one thing that came up after I'd been using the set-up for a while that I needed to do which stumped me.
The css Gulp task is set up to combine and compile everything to a single CSS file, which for most purposes is exactly what you'd want to do: only have one CSS file so there's not too many render-blocking resources for the browser to download.
But in my case I wanted to have one CSS file for use on the front end, but also a different one which would only be used in the CMS admin area which would be a linked to CKEditor instance. I wanted to have two files – master.scss and ckeditor.scss – which when saved would compile to master.css and ckeditor.css respectively.
The changes I needed to make in gulpfile.js were, in the scss task…
// return gulp.src(pkg.paths.src.scss + pkg.vars.scssName)
return gulp.src(pkg.paths.src.scss + '*.scss')
and in the tailwind task…
// return gulp.src(pkg.paths.tailwindcss.src)
return gulp.src(pkg.paths.build.css + '**/*.css')
and finally, in the css task…
// return gulp.src(pkg.globs.distCss)
return gulp.src(pkg.paths.build.css + '**/*.css')
…
// .pipe($.newer({dest: pkg.paths.dist.css + pkg.vars.siteCssName}))
.pipe($.newer({dest: pkg.paths.dist.css}))
Fairly simple changes as it turns out, but it took me a while to figure out, so I thought it might be worth posting here in case anyone else wants to do something similar.