Gulpは、SassやBabel・TypeScriptのコンパイル、ローカルサーバーの構築等、面倒なweb制作のタスクを効率的に記述する人気のビルドシステムです。2018年12月にリリースされた最新のバージョン4では、簡易なタスク定義、プラグインなしの直列・並列処理など、便利な機能が追加されています。
本エントリーでは、Gulp 4の導入方法と簡単なタスク定義までを紹介します。
「絶対つまずかないGulp 4入門(2018年版) - インストールとSassを使うまでの手順 - ICS MEDIA」では環境構築方法やSassのコンパイル、watchなどについて動画付きで詳しく解説しています。こちらもあわせて参照ください。
プロジェクトの初期設定
まずは環境準備です。コマンドライン(Windowsではコマンドプロンプト、macOSではターミナル)を使う場面がありますが、コピペだけで簡単にインストールでき、5分もあれば終了します。
任意のプロジェクトフォルダーにコマンドラインを使って移動します。
cd /Users/MyName/myproject
プロジェクトの初期設定を行います。
npm init -y
プロジェクトフォルダーにGulp 4のインストール
Gulp 4をインストールします。
npm install gulp -D
プロジェクトフォルダーのGulp 4を使う
プロジェクトフォルダーにインストールしたGulp 4を使うには、npm Node.js v8.2で導入されたnpxを使うのが便利です（参考記事「npm 5.2.0の新機能！ 「npx」でローカルパッケージを手軽に実行しよう」）。
npx gulpコマンドにより、プロジェクトフォルダーのGulpが使えるようになります。グローバルにgulp-cliをインストールする必要はありません。
npx gulp -v
タスクを指定したい場合は次のようにします。
npx gulp (タスク名)
Gulp 4を試してみる
環境が準備できたので、Gulp 4を使ってみましょう。Gulp 4の変更点は CHANGELOG に記載がありますが、基本的な使い方は同じです。
ログを出力する簡単なタスクは下記です。doneの部分はコールバック関数（タスクが終わった後に実行される関数）で、この指定がない場合は警告が出ます。
gulp.task("mytask", (done) => {
console.log("gulp 4 success!");
done();
});
タスクを実行してみましょう。
npx gulp mytask
コンソールにログが出力されれば成功です。
直列・並列処理
これまでGulpで直列処理（1つの処理が完了した後に次の処理が実行される）・並列処理（複数の処理が同時に実行される）を行うには、run-sequenceのようなプラグインを使う必要がありましたが、Gulp 4では標準でgulp.seriesとgulp.parallelが追加されたため、追加プラグインが不要となりました。
- task1 : 1秒後にログを出力
- task2 : 2秒後にログを出力
- task3 : 即座にログを出力
という内容のタスクを定義し、task1とtask2の完了後にtask3を実行するタスクを定義します。
gulp.task("default",
gulp.series(
gulp.parallel("task1", "task2"),
"task3"
)
);
実行すると、次のようにログが出力され、直列・並列処理が成功していることがわかります。
Gulp 4を使ってみよう
Gulp 4では、gulp.seriesとgulp.parallelを中心にAPIが更新されました。個人的にはGulp 3系を学ぶ時よりも、学習コストが低くなった印象を受けています。是非最新ビルドシステムGulp 4に触れてみてください。
■ 関連記事