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

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.