Gulp3のコードをGulp4に書きなおしてみた｜有限会社　オブジェクト・ラボ

構文エラーにハマる

前回はGulp(ガルプ)のgulp-sassパッケージを使ってSASSのコンパイルを自動化してみました。そのときお手本にしたgulp-sassプラグインを公開しているサイトのサンプルコードがGulp4ではエラーをはいて動かない😵という事態にハマりました。コードの変更が必要だったわけですが、Gulp3とGulp4でどこが違うのか、同じような事態で慌てないよう簡単に整理しておこうと思います。とはいえ、これまでのバージョンの変遷を何も知らないGulp初心者が、体系的にすべてを理解することは難しいので、自分の作成したコードをGulp4(推奨？)コードに直しながら学習しようと思います。

Gulp公式ドキュメントを振り返る(再び)

Gulp公式ページのCreate Taskの章の中では、Gulp4でもtask() 関数は使うことはできますがパブリックタスクのエクスポートを推奨しているとGulpのタスク作成の回で知りました。しかしその先の話は内容が濃すぎで頭に入らず😩途中ですっ飛ばし..しかし、今回の話はすっ飛ばしたAsync Completion以降の章に関連する情報がありそうです。

Gulp公式ページ：https://gulpjs.com/

Async Completion

タスクを定義した function は必ずタスクの完了を通知しなければならないそうで、error-first callback、stream、promise、event emitter、child process(子プロセス)、またはobservableのいずれかを返す必要があるそうです。

？😵？、それぞれがどういう意味を持ち、どういった場面で使用するものなのかやっぱり理解できないです。

おそらく SASSコンパイルのコードにあった dest() APIではファイルを更新するためにstreamが生成されるのでそれをreturnで返していたんだなと覚えておくことにします。また公式ドキュメントにあったダミー(処理が空っぽ)のタスクを定義した function(cb) がcb();で完結しているのはerror-first callback を使用しているということになるらしいです。だからreturnしなくてもエラーは発生しません。

上記のルールを怠ると、”Did you forget to signal async completion?”とエラーで怒られることになります。Gulpに関するさまざまな記事を拝見してますとこのエラーの遭遇率がやたら高そうです。

Watching Files

ファイルの変更を監視し変更が発生したときにタスクを実行します。タスクが実行中に新たな実行要求があっても重複して実行しないよう制御されているようです、なんて優秀。

実行するタスクが1つの場合

watch(監視するディレクトリ, タスク);

実行するタスクが複数の場合は結合して

watch(監視するディレクトリ, series(タスク1, タスク2));

と記述するのが一般的だそうです。Gulp3までは配列でタスク名を渡していたため、そのままGulp4で実行すると“watch task has to be a function (op
tionally generated by using gulp.parallel or gulp.series)”

gulp.parallel or gulp.series を使いなさい。と怒られたのはこの構文の変更によるものだったようです。

SASSコンパイルタスクをGulp4推奨コードで書き直してみる

さて、gulp-sassプラグインのページに掲載されているBasic UsageのコードをGulp公式にあるサンプルを真似てGulp4推奨コードで書き直してみました。命名規約やコード内の名前重複にかからないようfunction名、パブリックタスク名を変更しています。

css	SASSのコンパイル
watch_sass	SASSコンパイルの監視(自動化)
default	watch_sass

const { src, dest, series, watch } = require('gulp');
var sass = require('gulp-sass');
sass.compiler = require('node-sass'); // デフォルトだが一応明示的に宣言

function css() {
  return src('./sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(dest('./css'));
}

function watch_sass() {
  watch('./sass/**/*.scss', css);
};

exports.css = css;
exports.watch_sass = watch_sass;
exports.default = watch_sass;