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.
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 –
ckeditor.scss – which when saved would compile to
The changes I needed to make in
gulpfile.js were, in the
and in the
and finally, in the
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.