Skip to content

Tyssen Design — Brisbane Tyssen Design logo

[email protected] (07) 3300 3303

Gulp: output CSS files with the same file name as the source SASS/SCSS file

By /

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.

Like to say hello? Give us a call on (07) 3300 3303, send us an email to enquiries@tyssendesign.com.au, or a message by filling in the form below.