Aurelia #2-2:Aurelia CLIでどんなことができるの?の巻 その2

どーも!どーもどーも!zkymです。
今回もAurelia CLIの機能について見ていきたいと思います。

では早速。。。

au test

ユニットテストを実行するコマンドです。AureliaではKarmaJasmineを使ってテストが実行されます。Karmaの設定はプロジェクトのルートディレクトリにあるkarma.conf.jsファイルに保存されています。デフォルトではですとファイルはtest/unit以下に設置するようになっています。この辺はaurelia_project/aurelia.jsonの中のunitTestRunner.sourceで変更できます。

--watchオプションを指定すると、Karmaの--single-runオプションがOFFになり、ソースコードとテストコードの変更を検知して、変更があると自動的にテストを再実行してくれるようになります。

au generate

いわゆるスキャフォールド機能ですねー。部品の土台を作ってくれるヤツです。生成できる部品は以下のようになってます。

  • element(カスタムHTML要素、Aureliaでは独自のHTML要素を作って利用できます)
  • attribute(カスタムHTML属性、Aureliaでは独自のHTML属性を作って利用できます)
  • value-converter(値の変換器、モデルとか値をビューに表示するときのやり方と、逆にビューから入力を受け取って格納するやり方を定義するヤツですね)
  • binding-behavior(バインドの方式、ビューとデータの紐づけ方、たとえば組み込みのthrottleだと200msごとにビューとデータとを確認して片方の更新内容をもう片方に伝達するようになってます、詳しくはドキュメントを参照)
  • task(gulpのタスクです、作成したタスクはAurelia CLIの新しいコマンドとして呼び出せます)
  • generator(スキャフォールド機能で作成する部品を新しく追加できます)

ためしにタスクを追加してみましょー!

$ au generate task

ってやると名前なんにする?って聞かれるので、適当につけてやります。

What would you like to call the task?

> hoge
Created hoge.

成功するとaurelia_project/tasks/以下に該当のファイルが出来てます。中身は以下のようになってます。

import gulp from 'gulp';
import changed from 'gulp-changed';
import project from '../aurelia.json';
export default function hoge() {
return gulp.src(project.paths.???)
        .pipe(changed(project.paths.output, {extension: '.???'}))
        .pipe(gulp.dest(project.paths.output));
}

これを以下のように書き直して、

import gulp from 'gulp';

export default function hoge() {
        console.log("hogehoge!!!");
}

呼び出してやると、

$ au hoge
Starting 'hoge'...
hogehoge!!!

無事実行できましたねー!

まとめ

2回にわたって中身を見てきたAurelia CLI、いかがだったでしょうか?なかなか便利なヤツですねー!アルファ版とかベータ版とかではjspmとかgulpとかを直接イジイジするカンジだったんですが、その上を覆って使いやすいように工夫されてきてるなーってカンジを受けます。まだまだ発展中ってことなんで、これからもっと使いやすくなっていくことを期待しております。

次回はAureliaでライブラリ類を導入する方法について見ていきたいと思いまーす!

バイバイのバーイ!