Gulp-Description で Gulp タスクの説明書きを追加する
何やら Gulp v4 系では gulp.task().description(); という書き方ができるようになるらしいが、現行の v3.9.1 では対応しないようなので、Gulp-Description というツールを使うのが良さそうだ。
実際のコードはコチラ
今回紹介したパッケージとサンプルコードを利用し、AngularJS + Cordova なアプリで Appium を使った E2E テストを行うサンプルプロジェクトを作成した。以下を参考にしてほしい。
gulpfile.js はコチラ。
Gulp-Description の使い方
Gulp-Description は以下のようにインストールする。
# Gulp と Gulp-Load-Plugins のインストール
# Gulp-Description のインストール
$ npm i -D gulp-description
今回はデフォルトタスク、つまり $ gulp とだけ打って叩いた時に説明が出るようにしてみる。
gulp.task('default', () => {
// Gulp-Load-Plugins 経由で gulp-description を使用
$.description.help({
main: ['appium', 'build', 'dev', 'e2e', 'emu'],
description: {
appium: 'Appium サーバを起動する (e2e タスクの前に実行しておくこと)',
build : 'src ディレクトリのファイルをビルドし www ディレクトリに出力する',
dev : '開発用ライブリロードを開始する',
e2e : 'Protractor による E2E テストを実行する (事前に appium タスクを実行しておくこと)',
emu : 'ビルド後 iPhone7 シミュレータを起動する'
}
});
});
main 部分に表示させたいタスク名を列挙し、description 部分に連想配列の要領でタスク名と説明書きを記載する。gulpfile.js 内に存在しないタスクについての説明書きを書いても画面上には表示されない。
これで $ gulp と叩けばタスク説明が表示されるようになったが、Gulp をグローバルインストールしていない場合のことも考え、$ npm run info と打った時に表示されるようにしてみる。package.json にタスクを追加する。
"scripts": {
"info": "gulp default",
(以下略)
これで、以下のようにタスク説明が見られるようになった。
$ npm run info
> my-project@1.0.0 info /Users/Neo/MyProject
> gulp default
[15:16:14] Using gulpfile ~/MyProject/gulpfile.js
[15:16:14] Starting 'default'...
=== Main Task ===
appium Appium サーバを起動する (e2e タスクの前に実行しておくこと)
build src ディレクトリのファイルをビルドし www ディレクトリに出力する
dev 開発用ライブリロードを開始する
e2e Protractor による E2E テストを実行する (事前に appium タスクを実行しておくこと)
emu ビルド後 iPhone7 シミュレータを起動する
[15:16:14] Finished 'default' after 4.17 ms
もちろん、デフォルトタスク以外で作っても問題ない。
上述のスクリプトでは gulp-description.help() ($.description.help()) というメソッドを使用したが、他にも all() や dependency() といったメソッドもある。詳しくは公式の説明を参考にされたし。
本当は $ npm run とだけ打った時のタスク一覧に Description を追加したいんだけどな〜。そういう機能はなさそう (better-npm-run なら description が書けるけどちょっと違う気が)。
類似のツールに Gulp-Help というツールもあるので、コチラもドウゾ。