Gulp3のコードをGulp4に書きなおしてみた４

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

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

Gulp公式ページ

gulpjs.com

 

4 tweets

194 users

gulp.js - The streaming build system

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 を使いなさい。と怒られたのはこの構文の変更によるものだったようです。

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

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;

Gulpのタスクを実行

プロジェクトフォルダでgulpコマンドを実行しますと、defaultのSASSコンパイルの監視タスクが始まります。どうやら動作は大丈夫そうですがコードはエレガントになっているでしょうか😅、細部まで理解が及ばず無駄な記述がないかちょっと心配です。

前回の消化不良な部分が解消できました😃

次回はCSSやJavaScriptのファイルサイズを小っちゃく圧縮したりする作業とか他にも自動化できそうなことに挑戦したいと思います。

GulpでSASSのコンパイル手作業を自動化する５ 今回のテーマ 今回はgulp-sassパッケージを使ってSASSをコンパイルする時のオプションをいろいろ指定して、cssのファイルサ...