gulp-sass が v6.0.0アップデート公開。新しいSass JS APIに対応

先日「GulpでSass（.scss）をコンパイルしたらDeprecation Warning: The legacy JS API is deprecated and …という警告が出るので対処」という記事で、非推奨の警告メッセージを消す方法を書いたところですが、なんと新しいSass JS APIに対応した新バージョンの「gulp-sass（v6.0.0）」が公開されました。

Contents

新しいSass JS APIに対応したので、v6.0.0では非推奨の警告メッセージが出なくなった！
v6では、オプションの書き方が変更
- gulpfile.mjs
- package.json

新しいSass JS APIに対応したので、v6.0.0では非推奨の警告メッセージが出なくなった！

gulp-sass: https://www.npmjs.com/package/gulp-sass
「gulp-sass」の公式ドキュメント。

これで、めでたく警告メッセージに悩まされることはなくなりました。
私もアップデートし、動作確認済みです。

v6では、オプションの書き方が変更

v6への移行に関して、変更点が一点あり、オプションの書き方が変わったようです。
どんなオプションがあるのか詳しくないのですが、例えば出力形式を指定するオプションは、outputStyle → style に変わったようです。

gulpfile.mjs

警告メッセージを消すコードは削除し、35行目のハイライトした部分を修正（outputStyle → style）しました。

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({
        style: '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);

動作確認できた各バージョンも紹介しておきます。

package.json

{
  "name": "gulp-scss",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "autoprefixer": "^10.4.20",
    "gulp": "^5.0.0",
    "gulp-notify": "^5.0.0",
    "gulp-plumber": "^1.2.1",
    "gulp-postcss": "^10.0.0",
    "gulp-sass": "^6.0.0",
    "gulp-sass-glob-use-forward": "^0.1.3",
    "gulp-sourcemaps": "^3.0.0",
    "sass": "^1.81.0"
  }
}