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に触れてみてください。

■ 関連記事

• 絶対つまずかないGulp 4入門(2018年版) - インストールとSassを使うまでの手順 - ICS MEDIA
• Gulp入門 - Schoo（スクー）