Gulp + Sourcemaps + PostCSS(Autoprefixer + Minification via CSSnano) - build

Question

Basically, I want sourcemaps available to my unminified and minifies flavors of my site.css file. I'd like my end result to be:
site.css
site.min.css
site.css.map
site.css.min.map
Currently, I only get:
site.css
site.min.css
site.css.min.map
I know my gulp script is wrong, but I don't know how to fix it. I need sourcemaps to write a sourcemap to site.css before site.min.css gets created. HALP!
and Thank you
gulp.task('scss', gulp.series('bootstrap:scss', function compileScss() {
return gulp.src(['./site/assets/scss/*.scss'])
.pipe(sourcemaps.init())
.pipe(sass.sync({
outputStyle: 'expanded'
}).on('error', sass.logError))
.pipe(gulp.dest('./site/dist/css')) // outputs site.css
.pipe(postcss([autoprefixer(), cssnano()
]))
.pipe(sourcemaps.write('.'))
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('./site/dist/css')) //outputs site.min.css
}));

Answer 1

You only need sourcemaps for your unminified version, i would introduce a NODE_ENV for doing minification and sourcemaps, then use gulp-if to see if you're in development or production environment
Alternatively you could have separate build and dev tasks.
Using process.env.NODE_ENV means you can use them in postcss.config.js files etc. too
I found this really good because it shows you how you can use a gulp.babel.js file with Gulp 4. I was using 3.9.1 being reluctant to upgrade until this week but this helped immensely with understanding the changes from v3>4.