Gulpのタスク作成(公式サイトを読みながら)

前回はGulp(ガルプ)の導入を行ってみました。よーし！これでこれまでの手作業が自動化できるぞ😃となるわけですが、そのためには自分が行っていた手作業をタスクに定義しなければなりません。覚えることも多そうですので備忘録も兼ねてここに掲載しておこうと思います。

Gulpに関するさまざまな記事を拝見してますと、OSがWindowsであったりMacであったりはたまたGulpのバージョンが違っていたりでタスクの定義方法もちょいちょい異なっていたりしてました。今回も公式サイトに従ってみようと思います。

Gulp公式ページ：https://gulpjs.com/

gulpfile.jsの説明

gulpfile.jsは、gulpの動きを制御するためのファイルです。package.jsonと同じディレクトリにおきます。各タスクを独自のファイルに分割してgulpfileにインポートしたりもできるそうです。このgulpfile.jsを編集してタスクを定義していきます。

エクスポート

パブリックタスクはgulpfileからエクスポートされるため、gulpコマンドで実行できます。プライベートタスクは内部で使用されるように作成され、通常はseries()またはparallel()構成の一部として使用されます。プライベートタスクは、エンドユーザーが単独で実行することはできません。タスクをパブリックに登録するには、次の記述のようにしてエクスポートします。

const { series } = require('gulp');

// The `clean` function is not exported so it can be considered a private task.
// It can still be used within the `series()` composition.
function clean(cb) {
  // body omitted
  cb();
}

// The `build` function is exported so it is public and can be run with the `gulp` command.
// It can also be used within the `series()` composition.
function build(cb) {
  // body omitted
  cb();
}

exports.build = build;
exports.default = series(clean, build);

もっとチュートリアル風に進むのかなと思っていたら、なんだか急に専門的な解説になってきたのであらら…となりました。要はgulpコマンドで直接実行したいタスクはパブリックタスクとして登録するんだよ、とこれを覚えておくことにします。

Gulpのタスクを実行

プロジェクトフォルダでgulpコマンドを実行します。

c:\inetpub\wwwroot\my-project>gulp
[17:25:41] Using gulpfile c:\inetpub\wwwroot\my-project\gulpfile.js
[17:25:41] Starting 'default'...
[17:25:41] Starting 'clean'...
[17:25:41] Finished 'clean' after 5.73 ms
[17:25:41] Starting 'build'...
[17:25:41] Finished 'build' after 3.65 ms
[17:25:41] Finished 'default' after 29 ms

gulpコマンドの引数にタスク名を付けない場合はdefaultという名前を付けたタスクが実行されるそうです。上記の実行結果では、defaultタスク内のcleanタスク、buildタスクが順番に実行されていることが分かります。

タスクの合成

複数のタスクで構成されたタスクはseries()またはparallel()で合成するそうです。

タスクを直列に実行するには、series()メソッドを使用します。

タスクを並列で実行するには、parallel()メソッドを使用するそうです。

次の記述はseries()メソッドを使った例です。transpileタスクとbundleタスクが順番に実行されます。

const { series } = require('gulp');

function transpile(cb) {
  // body omitted
  cb();
}

function bundle(cb) {
  // body omitted
  cb();
}

exports.build = series(transpile, bundle);

次の記述はparallel()メソッドを使った例です。javascriptタスクと cssタスクは同時に実行されるそうです。

const { parallel } = require('gulp');

function javascript(cb) {
  // body omitted
  cb();
}

function css(cb) {
  // body omitted
  cb();
}

exports.build = parallel(javascript, css);

さらにseries()またはparallel()を組み合わせたりネスト(階層化)にしたりできるそうです。そこまで掘り下げるとかなりややこしそう😐、タスクの実行順序や組み合わせ方はいろいろつなげて実行する必要がでてきた時に詳しく学ぼうと思いますのでここでは割愛します。

実行させようとしているタスクの性質によって向き不向きがあるでしょうが、直観的には順番待ちせず並列で一斉にドバァーと処理した方が早そう、でも私は初心者なので直列で１つ１つ実行しながら動作を確認してみようと思いました。

Gulp公式ページのCreating Tasksの章まで読み進めてきました。後の章では

• Async Completion
• Working with Files
• Explaining Globs
• Using Plugins
• Watching Files

とさまざまな機能紹介が続いていきます、、うへぇ～😩

Gulpの機能を習得するにはまだまだ先が長そうです。当初の「SASSのコンパイル手作業を自動化するぞ」という目的にたどり着くには、このペースで読み進めていくとなるとまだまだ時間がかかりそう…ふぅ😟

ここまで読み進めて環境設定と基本的なタスクの作成方法は分かってきました。次回は公式のGetting Startedの道筋からちょっと離れて、SASS用プラグインを使った実践に挑戦したいと思います。

GulpでSASSのコンパイル手作業を自動化する...