cordova-plugin-browsersync で Live-Reload 開発を行う

Cordova アプリを作っていて、Live-Reload 開発を行いたいと思ったことはないだろうか。cordova-plugin-browsersync を使うと、Browser プラットフォーム限定なようだが、ライブリロード開発が可能になる。

プラグインのインストール

まずはプラグインをインストールする。

$ cordova plugin add cordova-plugin-browsersync

# Browser プラットフォームを入れていなければ追加する
$ cordova platform add browser

やることはコレだけ。後は cordova run の際にライブリロードを行うオプションを指定すれば良い。

$ cordova run browser --live-reload

これで任意のブラウザに cordova-plugin-browsersync の画面が開く。環境によっては何やらエラーっぽい見た目になっている場合もあるが、http://localhost:3000/ のトップに遷移すればちゃんとアプリが起動している。

./www/ ディレクトリ配下のファイルを操作すると Live-Reload が行われるので、./www/ ディレクトリ配下にソースファイルを置いている人はそのまま開発を進めていけば、保存する度に画面にも変更が反映される。

./www/ ディレクトリにはビルドしたファイルを格納するようにしている場合は、別途 Gulp スクリプトなどで ./src/ ディレクトリに対して Watch を仕掛け、./src/ ディレクトリ配下のファイルが変更されたらビルドを行い ./www/ ディレクトリに出力するようにしておく。こうすれば、./www/ の変化を cordova-plugin-browsersync が検知し、きちんとライブリロードされる。