Help us understand the problem. What is going on with this article?

最新ビルドシステムGulp 4入門 〜環境構築からタスク作成まで〜

More than 1 year has passed since last update.

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をインストールする必要はありません

Gulpの使用(バージョンの確認)
npx gulp -v

タスクを指定したい場合は次のようにします。

Gulpの使用
npx gulp (タスク名)

Gulp 4を試してみる

環境が準備できたので、Gulp 4を使ってみましょう。Gulp 4の変更点は CHANGELOG に記載がありますが、基本的な使い方は同じです。

ログを出力する簡単なタスクは下記です。doneの部分はコールバック関数(タスクが終わった後に実行される関数)で、この指定がない場合は警告が出ます。

ログの出力テストです
gulp.task("mytask", (done) => {
  console.log("gulp 4 success!");
  done();
});

タスクを実行してみましょう。

mytaskの実行
npx gulp mytask

コンソールにログが出力されれば成功です。

直列・並列処理

これまでGulpで直列処理(1つの処理が完了した後に次の処理が実行される)・並列処理(複数の処理が同時に実行される)を行うには、run-sequenceのようなプラグインを使う必要がありましたが、Gulp 4では標準でgulp.seriesgulp.parallelが追加されたため、追加プラグインが不要となりました。

  • task1 : 1秒後にログを出力
  • task2 : 2秒後にログを出力
  • task3 : 即座にログを出力

という内容のタスクを定義し、task1とtask2の完了後にtask3を実行するタスクを定義します。

Gulp4の直列・並列処理
gulp.task("default",
  gulp.series(
    gulp.parallel("task1", "task2"),
    "task3"
  )
);

 実行すると、次のようにログが出力され、直列・並列処理が成功していることがわかります。

Gulp 4を使ってみよう

Gulp 4では、gulp.seriesgulp.parallelを中心にAPIが更新されました。個人的にはGulp 3系を学ぶ時よりも、学習コストが低くなった印象を受けています。是非最新ビルドシステムGulp 4に触れてみてください。

■ 関連記事

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away