gulpでsassコンパイル時にソースマップを出力します。gulp4は標準機能でソースマップが書き出せます。gulp3のようにgulp-sourcemapsのインストールは必要ありません。

gulpを開発環境用に実行した場合はソースマップを出力し、本番環境用に実行した場合は出力をなしにします。開発環境と本番環境の分岐処理はgulp-modeを利用します。

gulpfile.jsにソースマップ出力の処理を追加します。gulp.srcとgulp.destの第二引数にsourcemaps: trueのオプションを指定します。なおgulp.destの第二引数はsourcemaps: trueの場合cssファイル内にソースマップが記述されますが、sourcemaps: './maps'のようにパスを指定すれば外部ファイルとしてソースマップが書き出せます。

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

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

const isDevelopment = mode.development() ? true : false;  //開発環境の確認

function styles() {
  return gulp
    .src('./src/scss/**/*.scss', {
      sourcemaps: isDevelopment  //開発環境の場合true
    })
    .pipe(mode.development(
      sass({
        outputStyle: 'expanded'
      })
    ))
    .pipe(mode.production(
      sass({
        outputStyle: 'compressed'
      })
    ))
    .pipe(mode.development(  //開発環境の実行
      gulp
        .dest('../assets/css', {
        sourcemaps: './maps'  //ソースマップを外部ファイルとして出力
      })
    ))
    .pipe(mode.production(  //本番環境の実行
      gulp
        .dest('../assets/css')
    ));
}

gulp.task('default', styles);

開発環境でgulpを実行します。

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

指定したディレクトリに拡張子.mapのソースマップが出力されます。コンパイル後のcssファイルにはコードの最後に外部ファイルとして書き出したソースマップのパスが記述されます。

//layout.css
@charset "UTF-8";

.p-access {
  text-align: center;
}

.p-access-ttl {
  color: #ff0000;
}

.p-access-bus {
  text-align: center;
}

.p-access-bus-ttl {
  color: #ff0000;
}

.p-access-train {
  text-align: center;
}

.p-access-train-ttl {
  color: #ff0000;
}
/*# sourceMappingURL=maps/layout.css.map */

なお本番環境でgulpを実行してもソースマップは出力されず、cssファイルにも変化はありません。