前回はGulp(ガルプ)の導入を行ってみました。よーし!これでこれまでの手作業が自動化できるぞ😃となるわけですが、そのためには自分が行っていた手作業をタスクに定義しなければなりません。覚えることも多そうですので備忘録も兼ねてここに掲載しておこうと思います。
Gulpに関するさまざまな記事を拝見してますと、OSがWindowsであったりMacであったりはたまたGulpのバージョンが違っていたりでタスクの定義方法もちょいちょい異なっていたりしてました。今回も公式サイトに従ってみようと思います。
Gulp公式ページ
まずは筆者の環境
- OS: Windows7 (x64)
- Node.js: 10.16
- gulp-cli: 2.2.0
- Gulp: 4.0.2
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バージョン(Gulp3)ではタスクとして登録するために task() 関数が使用されていたそうです。今も使うことはできますが上記のエクスポートを推奨しているようです。
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()を組み合わせたりネスト(階層化)にしたりできるそうです。そこまで掘り下げるとかなりややこしそう😐、タスクの実行順序や組み合わせ方はいろいろつなげて実行する必要がでてきた時に詳しく学ぼうと思いますのでここでは割愛します。
実行させようとしているタスクの性質によって向き不向きがあるでしょうが、直観的には順番待ちせず並列で一斉にドバァーと処理した方が早そう、でも私は初心者なので直列で1つ1つ実行しながら動作を確認してみようと思いました。
Gulp公式ページのCreating Tasksの章まで読み進めてきました。後の章では
- Async Completion
- Working with Files
- Explaining Globs
- Using Plugins
- Watching Files
とさまざまな機能紹介が続いていきます、、うへぇ~😩
Gulpの機能を習得するにはまだまだ先が長そうです。当初の「SASSのコンパイル手作業を自動化するぞ」という目的にたどり着くには、このペースで読み進めていくとなるとまだまだ時間がかかりそう…ふぅ😟
ここまで読み進めて環境設定と基本的なタスクの作成方法は分かってきました。次回は公式のGetting Startedの道筋からちょっと離れて、SASS用プラグインを使った実践に挑戦したいと思います。
