Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

More info: https://sass-lang.com/d/legacy-js-api

import gulp from 'gulp'; // gulpをインポート
const { series, parallel, src, dest, watch } = gulp; // series, parallel, src, dest, watchがそのまま使えるように

// sass 関連インポート ---------------------------------------------
import * as dartSass from 'sass'; // sassというモジュールをdartSassという名前でインポート
import gulpSass from 'gulp-sass'; // SassファイルをCSSにコンパイルするためのプラグイン
const sass = gulpSass(dartSass); // gulp-sassの関数にsassコンパイラを渡して定数sassを定義
import sassGlob from 'gulp-sass-glob-use-forward' // 複数のSassファイルを一括でインポートできるプラグイン（変更）
import plumber from 'gulp-plumber'; // エラー時、gulpを停止させず、エラーメッセージを表示するプラグイン
import notify from 'gulp-notify'; // エラーをデスクトップ通知
import sourcemaps from 'gulp-sourcemaps'; // ソースマップを作ってくれるプラグイン

// postcss 関連インポート ---------------------------------------------
import postcss from 'gulp-postcss'; // CSSを出力
import autoprefixer from 'autoprefixer'; // 自動でベンダープレフィックスを付ける

// 参照元パス
const srcPath = {
  css: './src/sass/**/*.scss',
};

// 出力先パス
const destPath = {
  css: './dest/css',
};

// Sassコンパイル
const dartSassCompiler = (done) => {
  src(srcPath.css) // コンパイルするSassファイルを指定
    .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")})) // エラーになってもgulp自体の停止せず、エラーメッセージを表示
    .pipe(sourcemaps.init()) // ソースマップを初期化
    .pipe(sassGlob()) // 複数のSassファイルをまとめて一括でインポート
    .pipe(
      sass.sync({
        silenceDeprecations: ['legacy-js-api'], // 警告メッセージを出さない
        outputStyle: 'expanded'
      }).on('error', sass.logError)
    )
    .pipe(postcss([autoprefixer()])) // 自動でベンダープレフィックスを付ける
    .pipe(sourcemaps.write('./')) // ソースマップを出力する
    .pipe(dest(destPath.css)); // 出力先ディレクトリを指定
    done(); //done()でタスク完了
};

export { dartSassCompiler };

// ファイル監視
const watchFiles = (done) => {
  watch(srcPath.css, dartSassCompiler); // scssファイルの監視 ＆ sassコンパイル
  done(); //done()でタスク完了
};

// npx gulpというコマンドで実行
export default series(dartSassCompiler, watchFiles);