おそらくSencha Cmd 4で導入された最も大きい機能は「sencha app watch」コマンドでしょう。このコマンドは、少し変更して、その数秒後にそれを動作させるという連続的な処理を大きく効率化します。この記事でapp watchコマンドの基本となる操作を見て、その動作をどのようにカスタマイズするか説明します。

App Watch以前

以前のSencha Cmdのリリースでは、各コマンドは１つのタスクを実行し、終了しました。ソースの変更に伴って、実行する必要がある通常のタスクを、３つのよくあるコマンドに要約します：

• sencha app refresh — はクラスが追加されたり、削除されたり、名称が変更された時に使われます。 Ext.Loaderが使う、”bootstrap” ファイルのアップデートをします。
• sencha ant sass — コマンドはSassソースコードからCSSファイルを再構成します。 これは*.scss ファイルが変更されると実行されます。 Ext JS 4.1では、代わりに “compass watch” を使うことで、ファイルシステムの変更を検出し、Sassをアップデートでききます。
• sencha app build — は全てのビルド手順（例えば上記の「sass」手順）を実行するだけでなく、”build/resources” フォルダにリソースをコピーするといった処理なども行います。 もし、resourcesやSassやそれ以外にも変更を行った場合、最適な選択はフルにビルドすることです。 “skip.slice=1”や “skip.sass=1” は、ビルドの手順が必要なかった場合によく使われます。

Ext JS 4.2でのテーマのパッケージの導入によって、 compass watchはもはや、Sassを作成する唯一のオプションである “sencha ant sass ” によって作られるテーマの構造が理解できなくなっていました。そのためsassのビルド手順が強制的にフルリビルドすることになり、compass watchより何倍も遅くなっていました。

App Watchの導入

テーマパッケージとSencha Cmdパッケージで提供されている柔軟性によって、 “compass watch” より賢いコマンドが必要となりました。 たとえcompass watchが動作したとしても、ワークフローの一部にしか関わりませんでした。 理想的な処理には、これらの特別な手順を全て管理し、アプリケーションをロードするために必要なものを、出来るだけ早く確保することが必要でした。

アプリケーションの内部構造

これがどのように動いているか確認するには、アプリケーションを基本のパーツに小分けするとわかります。 JavaScript、スタイル（Sass）、“resources”（画像など）。 Sencha フレームワーク（Ext JSとSencha Touch）ともにテーマと同じ組み合わせを含んでいます。 Sencha Cmdでは、この繰り返す構造（JavaScript、Sass、resources）が「パッケージ」で密閉されています。

ビルド処理はフレームワークからこの部分、選択されたテーマ（とそのベーステーマ）と他にも必要なパッケージを取得し、アプリケーションソースとこれらを組み合わせることで、コンパイルされたアプリケーションを作成します。Sencha Cmdはこの処理からの情報を活かして、アプリケーションの“development mode”（開発モード）のローディングを有効とします。 言い換えると、ビルドの副産物の一つとして、ソースからアプリケーションを直接ロードすることに対応するための必要なデータを取得できるということです。

ファイルシステムの監視

この情報を効率的に確保するには、ファイルシステムに変更があるかどうか監視するJava 7の能力を活用します。この機能に基づいて、app watchは次のものを監視します：

• アプリケーションソースコード (“app” フォルダ)
• アプリケーションSassコード (“sass”フォルダ)
• アプリケーションリソース (“resources” フォルダ)
• テーマパッケージソース、Sass、リソース (“src”、“sass”、“resources”)
• テーマのベーステーマのためのソース、Sass、リソース
• アプリケーション（”app.json”内）が必要とする全てのパッケージのソース、Sass、リソース。
• テーマパッケージを含めた他のパッケージが必要とするパッケージ(“package.json”内)のソース、Sass、リソース。

監視を始めるために、app watchを起動するには通常のビルドと同じ手順が行われます。このビルドフェーズの間に、上記のロケーションが記録されます。その後はapp watchが終了せずにポーズして、ファイルシステムに変更があるかを監視します。

フォルダの内容が変更された時に、app watchがその変更を検出し、特別なビルド手順を実行します。 その手順が行われたあとには、app watchは再びポーズして、他のファイルシステムの変更を待機します。 変更による商用時間はパソコンによりますが、ほとんどの場合5秒（またはそれ以下）です。

監視していない

アプリケーションの内容とそれに必要なパッケージを全て監視している一方、監視されていないものがあります。app.json、package.json またはいくつある sencha.cfg ファイルの１つを変更した場合には、app watchを一旦終了して（CTRL+C）再起動する必要があります。

App Watchの動作

どのように動作するかを見るために、Ext JS 4.2.2 でアプリケーションを生成し、すぐにsencha app watchを実行しました。

App Watchの中をのぞく

App watchの技法のほとんどは、生成されたビルドスクリプトに実装されています。 そのため、この手順をカスタマイズできます。 Sencha Touchアプリケーションと、Ext JSアプリケーションとでは行う手順が少し変わりますが、大体の構造は同じです。詳しくはマスタービルドスクリプト build.xmlがインポートする .sencha/app/watch-impl.xmlをご覧下さい。 ビルドスクリプトについて詳しくは、Sencha Cmd ドキュメンテーションをご覧ください。