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

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

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

Gulp公式ページ

gulpjs.com

 

4 Tweets

194 Users

2360 Pockets

gulp.js - The streaming build system

https://gulpjs.com

gulpfile.jsの説明

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

エクスポート

パブリックタスクはgulpfileからエクスポートされるため、

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()メソッドを使った例です。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のコンパイル手作業を自動化する３ 実践してみよう 前回はGulp(ガルプ)のタスク作成について学んでいきました。前回までGulp公式のGetting Startedを...