Add optional flag to disable sourcemaps

We use environment specific builds, Please add optional disable flag to sourcemaps.init() to enable or disable sourcemaps generation.

global.env  = process.env.NODE_ENV  || 'DEV';

gulp.task('styles', function () {
    return gulp.src('app/styles/*.scss')
        .pipe($.plumber())
        .pipe($.rubySass({
            style: 'expanded',
            precision: 10,
            sourcemap: (env === 'DEV'), //Only enable sourcemap for DEV env.
            loadPath: ['bower_components/bourbon/dist','bower_components/compass-mixins/lib']
        }))
        .pipe($.autoprefixer('last 2 version')) 
        .pipe(gulp.dest('.tmp/styles'));
});

[floridoo]

Just use gulp-if:

[...]
.pipe(gulpif(env === 'DEV', sourcemaps.init()))
[...]

[illvart]

Without any external plugins, use Transform from node stream to return next(null, file) (whatever in development or production mode). This implementation use classes 😁

// my-project/sass-app/gulpfile.js

'use strict';

const {Transform} = require('stream');
const sourcemaps = require('gulp-sourcemaps');

class SourceMaps {
  constructor(mode = false) {
    this.mode = mode;
  }
  // private method
  #next() {
    return new Transform({objectMode: true, transform: (file, _, next) => next(null, file)});
  }
  init(...args) {
    if (this.mode) return this.#next();
    return sourcemaps.init(...args);
  }
  write(...args) {
    if (this.mode) return this.#next();
    return sourcemaps.write(...args);
  }
}

// ...

const gulp = require('gulp');
const sass = require('gulp-dart-sass');
const postcss = require('gulp-postcss');

const isProd = process.env.NODE_ENV === 'production';
const isDev = process.env.NODE_ENV === 'development' || process.env.NODE_ENV !== 'production';

function styles() {
  const sourcemapsTransform = new SourceMaps(!isProd /* or isDev */); // return next() in development

  return (
    gulp.src('./src/styles/app.scss')
      .pipe(sourcemapsTransform.init({largeFile: true}))
      .pipe(
        sass.sync({
          // [@use] resolved sass dependencies
          includePaths: ['./node_modules'],
        }).on('error', sass.logError),
      )
      .pipe(postcss([require('autoprefixer')]))
      .pipe(sourcemapsTransform.write('.', {addComment: false}))
      .pipe(gulp.dest('./dist')) // dist/app.css
  );
}

exports.styles = styles;

Then run:

$ NODE_ENV=development npx gulp styles
# or NODE_ENV=development yarn run gulp styles

You can also use SourceMaps around tasks by create/export SourceMaps as module. Example module.exports = SourceMaps and import it🔥