gulp-sass が v6.0.0アップデート公開。新しいSass JS APIに対応 NEW
先日「GulpでSass(.scss)をコンパイルしたらDeprecation Warning: The legacy JS API is deprecated and …という警告が出るので対処」という記事で、非推奨の警告メッセージを消す方法を書いたところですが、なんと新しいSass JS APIに対応した新バージョンの「gulp-sass(v6.0.0)」が公開されました。
新しい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"
}
}
- Node.js(v20.18.0)
- NPM(v10.9.1)