タスクランナーである「Gulp.js」でなにやらエラーがありました。

gulp-sassの大幅なアップデートがあったようです。
目次
バージョンアップを行う
公式サイトを見るとようやくわかりました。


なにやら、あなたのgulpfileを書き直してください…とのことです…
「-がついてるものは、もう非推奨です。+の方を使ってください。」とのことでした。
公式サイトを翻訳してまとめました。
・gulp-sass
バージョン5にはNode12以降が必要です。
・読み込み方が変更しました。
現在使用中のgulpのバージョンはターミナルで確認できます。
//Node.jsのバージョン確認
$ node -v
//gulpのバージョン確認
$ gulp -v
node.jsは公式サイトでもインストール可能です。バージョンアップも同じ方法。
※推奨されているバージョンをインストールしてください。
//ローカルファイルにgulpをインストール
$ npm install sass gulp-sass --save-dev
//または(Dは--save-devの略)
$ npm install -D gulp
//うまくいかなければアンインストールしてやり直す --globalか-Dかは環境による
$ npm rm --global gulp-cli
インストールしたらちゃんとバージョンが変わっているか確認してみてください。
読み込み方の変更点
今までのコードは…
//gulp-sass
var sass = require('gulp-sass');
これからは…↓↓↓
//gulp-sass
const sass = require('gulp-sass')(require('sass'));
公式サイトはvarが書いてありましたが、varではなくて、constやletでも可能です。
【おさらい】gulp3→gulp4への変更点
gulp4になったときにgulp.taskという書き方は非推奨になってしまいました‥‥。
今回のgulp5へのアップデートでこれはまずいと思ったので、全て一新して書き直すことにしました!
※非推奨なだけであってまだ使用できます。

・gulp.task()
が非推奨 → 関数宣言とexports
が推奨へ。
・gulp.watch()
の第二引数が配列から関数名へ。
・series()
とparallel()
が使用できるようになった。
参考文献
https://qiita.com/manabuyasuda/items/0971dbd3729cf68f87fb
新しい書き方
//分割代入を使って、使用する関数を取り出す
const { src, dest, watch, series } = require('gulp');
const cssSass = () => {
return src('./sass/**/*.scss') //コンパイル元
.pipe()
//以下お使いのプラグインの処理を.pipeで書く
.pipe(dest('./css')) //コンパイル先
}
// タスクをまとめて実行 exports.のあとはコマンド名。gulp sassで実行できる。
exports.sass = series(cssSass);
JavaScriptのES6の書き方をしています。
関数名は任意。
taskに慣れすぎていていましたが、ES6を見慣れていたらむしろこちらの書き方の方がわかりやすい!
ejsでエラーが発生!?
【追記】上記のreturn文ではなぜかejsの場合はエラーが起きました。
returnを使わない場合は、引数を設定して、{}内で実行します。※公式サイトのやり方です。
const htmlEjs = (done) => {
gulp.src(["ejs/**/*.ejs", "!ejs/**/_*.ejs"])
.pipe(ejs())
.pipe(rename({ extname: ".html" })) //拡張子の指定
.pipe(replace(/[\s\S]*?(<!doctype)/, "$1")) //冒頭の余白削除
.pipe(dest("./"))
done();
};
exports.ejs = series(htmlEjs);
renameの書き方も変わっているので、gulp-ejsの公式サイトのそのままをいれています。
seriesとparallelの使い方
公式サイトにseries()とparallel()の使用方法もありました。
両方を使った書き方もありました。いろいろ使えそうです。
series() ・・・直列で処理します。順番を明確にしたいとき。
parallel() ・・・並列で処理します。順番がどうでもよいとき。
//例
exports.build = parallel(css, javascript);
//parallelを入れることもできる
exports.build = series(clean, parallel(css, javascript));
Watchの書き方
バージョン3→4の時にgulp.watch()の第二引数が配列から関数名へ変更になりました。
//gulp v3の時
// gulp.task('sass:watch', function() {
// gulp.watch('./sass/**/*.scss', ['sass']);
// });
//gulp v4 まだこの書き方でもOK!
gulp.task('sass:watch', function() {
gulp.watch('./sass/**/*.scss', gulp.task('cssSass'));
});
//※タスク名はsassコマンド名は『gulp sass:watch』となる
gulp watch公式
https://gulpjs.com/docs/en/api/watch/
//新しい書き方例の例
//監視したい対象・オプション(詳しくは公式へ)・処理したいタスク
watch(globs, [options], [task])
exports.watch = () => {
watch('./sass/**/*.scss', series(cssSass));
};
※cssSassは任意のタスク名(関数名)です。
※コマンド名は任意です。
便利なコマンドメモ
package.jsonに記載されているプラグインの古いかどうか
$ npm install npm-check-updates -g
以下のコマンドで確認することができます。
//プラグインが古いかどうかチェック
$ncu
//プラグインを最新にアップデート
$ncu -u