今回はAngularDartで開発する上で必要なツールであるwebdevに関する使い方を紹介したいと思います（ぶっちゃけhelpコマンドで出る情報そのまんまなので内容は薄いです）
webdevとは
webdevはDartのWebアプリケーション開発者のためのCLIツールです。なのでAngularDartのためだけに存在するわけではありません。webdevの現時点（2018/05/06）での最新バージョンは2.0.4で、webdevを使うことで下記のような事が可能になります。
- ソースコード修正時の自動リロード
- Dart Dev Toolsの使用
- release用のビルド
インストール方法は前回の記事を参照して頂ければと。
2つのモード
webdevには主に2つのビルドモードが存在します。1つ目はserveで主に開発時に使用するモードです。
webdev serve
2つ目はbuildで主にリリース用の成果物を生成するためのモードです。
webdev build
以下はそれぞれの詳細を見ていこうと思います。
webdev serveの詳細
--auto オプション
他の言語やツールだとHot DeployとかLive Reloadとか言われるやつですね。webdevでは2つのモードが用意されています。
1つ目はrestartで、修正したソースコードの差分をreloadし、エントリーポイントであるmain関数を再実行します。この時動作中に変更された状態は破棄されます。
webdev serve --auto=restart
2つ目はrefreshで、ソースコードが修正されるとページ全体をrefresh（再リロード）します（F5を押した時と同じ動きになります）
webdev serve --auto=refresh
--launch-in-chrome オプション
chromeのデバッグポートを開いてchromeを新規に起動してアプリケーションを実行します。
webdev serve --launch-in-chrome
--debug オプション
Dart Dev Toolsを有効にします。上記--launch-in-chromeオプションと同時に指定する必要があります。
このオプションを指定して実行した状態でAlt + Dを押すとDart Dev Toolsが立ち上がります。現時点ではFlutterで使用する時に比べて情報が少ない（というかconsole logくらいしか表示されない）ですが、今後はここで様々な情報が得られるようになるはずです。期待したいですね。また、今後はchrome以外でも実行できるようになるみたいです。
webdev serve --launch-in-chrome --debug
-r オプション（--release）
リリースモードでビルドします。AngularDartは開発時はDart Dev Compiler（通称DDC）にてコンパイルが行われ、リリースモードではdart2jsにてコンパイルが行われます。このオプションを指定する場合はdart2jsにてコンパイルされ実行されます。自分はこれで実行する事は全然無いですが、使用するケースとしてはリリースモードで実行した場合にだけバグってしまうような時にデバッグ用に実行するとかでしょうか。
webdev serve -r
ポートを指定するには
webdev serveで起動する場合はデフォルトで8080のポートでlistenします。このポートを変えたい場合は下記ようにエントリーポイントが存在するディレクトリをポートを指定して起動すればOKです。
webdev serve web:8081
-o オプション（--output）
ビルド後の出力先を指定します。開発時に使う必要性はほぼ無いんじゃないかなぁと。
下記の場合はプロジェクトディレクトリ直下のoutというディレクトリに成果物を出力して起動します。
webdev serve -o out
-v オプション（--verbose）
指定した場合、ビルド時などのログの詳細を出力するようになります。
webdev serve -v
--log-requests オプション
サーバーへのリクエストのログをコンソールに出力します。自分はあまり使ってないですねぇ。
webdev serve --log-requests
--hostname オプション
ホスト名を指定して起動します。これも通常の開発ではほとんど使わないのではないでしょうか。他の人のPCから自分のアプリケーションを見たい時とかはこれでIPを指定して起動する必要があります。デフォルトはlocalhostです。
webdev serve --hostname=192.168.XX.XX
実際に使っているオプション
自分は下記コマンドで常に起動しています。
webdev serve --auto=restart --launch-in-chrome --debug
webdev buildの詳細
指定可能なオプションは-o、-r、-vで内容はwebdev serveと同じですが、-rはデフォルトで有効になっていて、-oのデフォルト出力先もbuildというディレクトリになっています。なので実際に実行する時は何も考えずにwebdev buildで基本OKのはずです。
上にも書いているのですがこのモードはdart2jsにてコンパイルされます。余談ですが、この進化も素晴らしく、以前であれば最終的なjsファイルは余裕で1Mを超えてたりしたんですが最近は200K以下のサイズになっています（どうやってここまで小さく出来たのか、その実現方法とか興味が湧きますね）
最後に
いかがでしょうか。個人的にはDart Dev Toolsの進化に期待しています。DDCやdart2jsの違いだったり今回はあえて触れていないbuild_web_compilersなどに関しては次回以降に記事にしたいと思います。