gulpでsassコンパイル時に、開発環境はoutputStyle: 'expanded'、本番環境はoutputStyle: 'compressed'で書き出します。まずgulp-modeをインストールします。

//gulp-modeのインストール
npm install gulp-mode

gulpfile.jsにgulp-modeの処理を追加します。gulp-modeの読み込み部分にproduction（本番環境）とdevelopment（開発環境）を定義します。デフォルトはdevelopmentです。verboseはgulp実行時にgulp-modeの詳細メッセージを表示できますがfalseで問題ありません。mode.productionで本番環境、mode.developmentで開発環境の処理が実行できます。

//gulpfile.js
const gulp = require('gulp');
const sass = require('gulp-sass');

const mode = require('gulp-mode') ({  //gulp-modeの読み込み
  modes: ["production", "development"],
  default: "development",
  verbose: false
});

function styles() {
  return gulp
    .src('./src/scss/**/*.scss')
    .pipe(mode.development(  //開発環境の実行
      sass({
        outputStyle: 'expanded'
      })
    ))
    .pipe(mode.production(  //本番環境の実行
      sass({
        outputStyle: 'compressed'
      })
    ))
    .pipe(
      gulp
        .dest('../assets/css')
    );
}

gulp.task('default', styles);

gulp-sassの実行が本番環境と開発環境に分岐できました。試しに本番環境用のgulpを実行すると、sassがoutputStyle: 'compressed'でコンパイルされます。

//本番環境用のgulp実行
npx gulp --production

開発環境用はデフォルトの設定になっているためオプションを指定せずにgulpを実行します。sassがoutputStyle: 'expanded'でコンパイルされます。

//開発環境用のgulp実行
npx gulp