Gulp4系を使う(その1) - noifuji’s blog

Gulpを使う理由

Gulpはひとことで言うと「タスクを自動化するツール」で、フロントエンドの開発でよく利用されています。
Webページをhtml, css, javascriptで書くだけなのになぜこのようなツールが必要なのでしょうか?
実際に大きな規模の製品開発を複数人で実施すると、ただソースを書けばいいではなく様々なことを考慮する必要があります。たとえば、下記のようなことがらです。

複数人で開発するため、altJSやsassを使用して保守性を高めたい。
開発環境が異なるメンバー間でも、共通の作業環境を作りたい。
製品としてリリースする際は、画像やファイルなどを最適なサイズに圧縮したい。難読化したい。
ソースコードを修正したら、サーバーを起動してブラウザで変更点を確認したい。

・・・

これらを手動でちまちまやるのは非効率なので、自動化するスクリプトを組みたくなります。そこでGulpを利用するというわけです。
具体的には、gulpfile.jsというファイルに自動化したい作業のスクリプトを書きます(あのファイルをこう処理してここに置く、、など)。それを実行することで、作業が自動的に完了します。

Gulpの動作環境

GulpはNode.js上で動作します。
Node.jsはWindows、Mac、Linuxで動作するので、1回自動化スクリプトを書いておけば、どの環境でも動作します。
下記の手順で環境を構築していきます。

Node.jsをインストールする。

こちらから、バージョン14.15.4をインストールしましょう。
https://nodejs.org/ja/

新しいプロジェクトを作成する。

適当なフォルダにSampleというフォルダを作成しましょう。(日本語を含むパスは避けた方が無難です。)
作成できたら、Sampleフォルダに移動して下記コマンドを入力してください。

npm init

Enterを連打していき、下記の画面がでるのでEnterを入力すると、フォルダにpackage.jsonが作成されます。

{
  "name": "sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes)

その後、下記コマンドでgulpをインストールします。
(プロジェクトによって使用するバージョンが異なると思うので、個人的にグローバルインストールは避けた方がいいと思ってます。)

npm install gulp --save-dev

package.jsonを確認すると、下記のようにgulpが追加されているのがわかります。
gulpバージョン4.0.2がインストールされています。3系と4系で記述方法が異なるため、気を付けてください。ここでは4系を対象に進めます。

{
  "name": "sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^4.0.2"
  }
}

Gulpを動作させる

簡単なタスクの作成

先ほど作成したSampleフォルダに、gulpfile.jsというからのファイルを作成し、下記のコードを記入して保存してください。

//Gulpの機能を提供するオブジェクトを取得しています。
const gulp = require('gulp');

//コンソールにHelloと表示するhelloタスクを定義しています。
//gulpのタスクは全て非同期で実行されるため、エラーが発生する場合はこのコールバックにエラーを渡します。callback(new Error("aaa"))
//このタスクはプライベートなタスクなため、npx gulp helloのようにコマンドラインから呼び出すことはできません。
function hello(callback) {
  console.log('Hello');

  //すべての処理が完了したら、引数で与えられたコールバック関数をコールします。
  callback();
}

//everyoneタスクを定義しています。
function everyone(callback) {
  console.log('Everyone');
  callback();
}

//srcフォルダのjsファイルをoutputフォルダにコピーするcopyタスクを定義しています。
//タスクの書き方として、helloタスクのようにcallback()を利用する方法以外に、
//このようにstreamをreturnする方法もあります。※1
function copy() {
  return gulp.src('src/*.js')
    .pipe(gulp.dest('output/'));
}

//exportsで指定したタスクは外部からnpx gulp greetingのように呼び出すことができます。
//ここでは、helloタスク→everyoneタスクと順次処理するようなタスクを定義し、パブリックなgreeitingタスクとしています。
exports.greeting= gulp.series(hello, everyone);

※1:その他の定義方法はこちらをご覧ください。
Creating Tasks | gulp.js

その後、下記のコマンドを実行しましょう。

npx gulp greeting

画面にHelloと表示されたかと思います。
あとは、自動化したいタスクを、このhello()のようにメソッド化していけば、複雑な自動化タスクも作成することができます。

練習問題

下記のようなGulpタスクを作成してみましょう。
タスク1:「Task1 is processing...」と表示する。
タスク2:「Task2 is processing...」と表示する。
タスク3:「Task3 is processing...」と表示する。
タスク4:「Task4 is processing...」と表示する。
タスク1が完了後、タスク2とタスク3を同時に実行し、それら2つのタスクが完了してから、タスク4を実行する。
コンソールからnpx gulp tasksで実行できるようにしてください。