Corredor

ウェブ、プログラミングの勉強メモ。

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 というツールもあるので、コチラもドウゾ。

フロントエンドエンジニア養成読本 [HTML、CSS、JavaScriptの基本から現場で役立つ技術まで満載! ] (Software Design plus)

フロントエンドエンジニア養成読本 [HTML、CSS、JavaScriptの基本から現場で役立つ技術まで満載! ] (Software Design plus)

  • 作者: 斉藤祐也,石本光司,加藤賢一,水野隼登,谷拓樹,泉水翔吾,原一成,平木聡,佐藤歩,杉本吉章
  • 出版社/メーカー: 技術評論社
  • 発売日: 2014/07/02
  • メディア: 大型本
  • この商品を含むブログ (1件) を見る