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

どーも!どーもどーも!zkymです。

今回はAurelia CLIの機能を見ていきたいと思いまーす。Aurelia CLIのインストールは↓でできます。詳しくは前回を参考にしてください。

npm install aurelia-cli -g

では早速。。。

au help

au helpを実行すると下記のようにコマンドの一覧と説明がでてきます。

$ au help

build --env value

Builds and processes all application assets.

--env - Sets the build environment.

run --env value --watch

Builds the application and serves up the assets via a local web server, watching files for changes as you work.

--env - Sets the build environment.

--watch - Watches source files for changes and refreshes the app automatically.

test --env value --watch

Runs all unit tests and reports the results.

--env - Sets the build environment.

--watch - Watches test files for changes and re-runs the tests automatically.

generate generator-name

Generates code for common use cases in Aurelia applications.

generator-name - The name of the generator you want to run.

help

Displays the Aurelia CLI help.

newの説明がなぜか載ってないっすね(´∀`;)

と思ったら、プロジェクト外で実行するとでました。

new <project-name> --here

Creates a new Aurelia application project.

project-name (optional) - The name to create the project with. If one isn't provided, the wizard
will ask for one.

--here - Creates a new project with the current working directory as the root of the project
instead of creating a new project folder.

au new

現在のディレクトリにAureliaのプロジェクトを作成するときに実行します。詳しくは前回の記事を参考にしてください。

--hereオプションを指定すると、現在のディレクトリをプロジェクトのルートディレクトリとみなして、ディレクトリ内にプロジェクトの種々のファイルが作成されます。プロジェクトのディレクトリが既にある場合に使うオプションです。ASP.NET Coreではこれ使ってくれって言う説明がドキュメントにあります。

au build

プロジェクトをビルド(ES2015やTypeScriptで書かれたプロジェクトのソースファイルをトランスパイルして、1つにまとめます。また依存ライブラリのファイルも1つにまとめます。)し、アプリケーションを実行できる状態にします。プロジェクトのルート以下で実行します。

$ au build
Starting 'readProjectConfiguration'...
Finished 'readProjectConfiguration'
Starting 'processMarkup'...
Starting 'processCSS'...
Starting 'configureEnvironment'...
Finished 'processCSS'
Finished 'processMarkup'
Finished 'configureEnvironment'
Starting 'buildJavaScript'...
Finished 'buildJavaScript'
Starting 'writeBundles'...
Tracing app...
Tracing environment...
Tracing main...
Tracing resources/index...
Tracing app...
Tracing text...
Tracing aurelia-binding...
Tracing aurelia-bootstrapper...
Tracing aurelia-dependency-injection...
Tracing aurelia-event-aggregator...
Tracing aurelia-framework...
Tracing aurelia-history...
Tracing aurelia-history-browser...
Tracing aurelia-loader-default...
Tracing aurelia-logging-console...
Tracing aurelia-route-recognizer...
Tracing aurelia-router...
Tracing aurelia-templating-binding...
Tracing aurelia-templating-resources...
Tracing aurelia-templating-router...
Tracing aurelia-testing...
Writing app-bundle.js...
Writing vendor-bundle.js...
Finished 'writeBundles'

デフォルトではビルドの成果物はscriptsディレクトリに出力されます。プロジェクト内のaurelia_project/aurelia.jsonファイルで出力設定を変更できるんすけど、試しに変更してみるとビルドに失敗してしまいます(´・ω・`)ドキュメントでも該当箇所は見当たらないし、ソースもざっくり追ってみたんですけどイマイチつかみきれず。今後わかれば追記したいと思います。

--envオプションで、ビルドする環境を選択できます。こんな感じau build --env stageで使います。devstageprodの3つが指定できます。指定しない場合はdevが選択されます。デフォルトではそれぞれaurelia_project/environments/の中で下記のように設定されています。

export default {
debug: false,
testing: false
};

debugtrueにするとログのレベルがデバッグに設定されます。
testingtrueにするとaurelia-testingがアプリに含まれるようになります。

au run

プロジェクトのビルドを行った後、アプリを起動します。WebサーバーにはBrowserSyncが使われています。(ゴーストモードが有効なんで、最初やったときは他のメンバーが同時にさわっていてちょっとビビりました(・ω<))

起動が成功すると最後の2行にアクセス先のURLが表示されます。上がアプリのURLで、下がBrowserSyncのUIのURLになります。このコマンドの裏ではgulpのタスクが動いているんですが、ポートはそのタスクファイル(aurelia_project/tasks/run.js)に直書きされてるんで、もし変えたい場合はそこを直接編集する必要があります。

--envオプションで、buildと同様に環境を選択できます。

--watchオプションを指定すると、gulpのwatch機能を使ってソースコードの変更を検知し、変更があると自動的に再ビルド・再起動してくれるようになります。(アルファ版のときは動作が不安定だったんだけど改善されてるかなぁ)

$ au run
Starting 'readProjectConfiguration'...
Finished 'readProjectConfiguration'
Starting 'processMarkup'...
Starting 'processCSS'...
Starting 'configureEnvironment'...
Finished 'processCSS'
Finished 'processMarkup'
Finished 'configureEnvironment'
Starting 'buildJavaScript'...
Finished 'buildJavaScript'
Starting 'writeBundles'...
Tracing app...
Tracing environment...
Tracing main...
Tracing resources/index...
Tracing app...
Tracing text...
Tracing aurelia-binding...
Tracing aurelia-bootstrapper...
Tracing aurelia-dependency-injection...
Tracing aurelia-event-aggregator...
Tracing aurelia-framework...
Tracing aurelia-history...
Tracing aurelia-history-browser...
Tracing aurelia-loader-default...
Tracing aurelia-logging-console...
Tracing aurelia-route-recognizer...
Tracing aurelia-router...
Tracing aurelia-templating-binding...
Tracing aurelia-templating-resources...
Tracing aurelia-templating-router...
Tracing aurelia-testing...
Writing app-bundle.js...
Writing vendor-bundle.js...
Finished 'writeBundles'
Application Available At: http://localhost:9000
BrowserSync Available At: http://localhost:3001

ちょっとなげーなー。。。今回はここまでにしておきます。
次回はtestgenerateについて触れていきまーす。

バイバイのバーイ!