Aureliaのnavigationスケルトンプロジェクトはget startedでも使われていますが、get startedでは説明されていないこともあるので、ここで紹介します。
対象となるskelton-navigationは、2015-4-18 時点のmasterです。
動かすまで
get startedの通りで動かないということはないです。つまづくとしたら、npmとjspmの周辺でしょう。
ビルドコマンド
gulp の主要なタスクは下記の通りです。build/tasks フォルダにタスクごとにファイルが分けて配置してあります。
- watch - アプリケーションサーバを起動してアプリケーションが動く状態にします。ソースを変更すると自動でリロードしてくれます。
- serve - アプリケーションサーバの起動のみです。
- build - アプリケーションのビルドを行います。
src以下のjsファイルをbabelでコンパイルしてdistに配置します。 - clean - distディレクトリ中のファイルを削除します。
- test - Karmaで
test/unit以下のテストを実行します。 - tdd -
testと同じですが、常にソースを監視して、ソースが変更されたらKarmaを実行するようにします。 - e2e - SeleniumによるEnd to Endテストを実行します。
test/e2e/distというディレクトリに出力されます。 - prepare-release - ビルドを行い、リリース用にドキュメントを生成して、docディレクトリに配置します。
e2e を実行する前には、watchまたはserveで、アプリケーションサーバを起動しておく必要があります。
get startedとの違い
get startedではindex.htmlとsrcフォルダを削除して、1から作成しますが、この手順で作成するソースと、元々あるソースには違いがあります。
元々のソースではanimatorプラグインを読み込んでいるため、スライドインのエフェクトがかかっています。
具体的にどこが違うかというと、index.html で、
<body aurelia-app="animation-main">
のようにanimation-mainを読み込むように指定し、src/animation-main.js で
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin('aurelia-animator-css');
aurelia.start().then(a => a.setRoot('app', document.body));
}
のように、Aurelia自体の設定を行っています。app.js が呼ばれる前に、Aureliaの設定やプラグインの組み込みを行っています。
これはAurelia読み込み前の初期化にも応用できると思います。
ここで使っているaurelia.use のAPIはdocs.md でも説明されています。ただanimator プラグインがどのような挙動をするのかは、分かっていないので、後で調べてみようと思っています。