Umi Uyuraのブログ

プログラミング関連の作業ログ

NW.jsで最も簡単なLivereload

NW.js node-webkit Node.js

React + NW.jsで作っているツールのUIなどをいじり始めて、いろいろと編集するファイルが増えてきたので、そろそろLivereloadできた方が便利だよなーと思ってきました。

いまどき使ってないの？という感じですが、Web制作は専門ではないので…というのと、実際のところ今まで作るときは Roots といった静的サイトジェネレータなどのフレームワークを使ったりしていたので、自分で環境を作ったことがないというのが正直なところです。

で、そうなると、やはりいい加減何かしらタスクランナー系を導入しないといけないのかな、と思ってきたのですが、これもNW.jsのWikiにやり方が載っていました。

最も簡単なLivereload

いくつか方法があるようでしたが、最も簡単なものは、index.htmlに以下のコードを書いておくだけでした。

<script>
  var path = './';
  var fs = require('fs');

  fs.watch(path, { recursive: true }, function() {
    if (location)
      location.reload();
  });
</script>

これでいけました。

サブフォルダ内での変更も監視するように、 recursive: true をつけています。 ただ、この方法はMacオンリーらしく、Windowsなどで動かす場合は、Livereload系のパッケージやGulpなどのタスクランナーを使うのが良いようです。

少し気になるのは、.jsxを変換している時のキャッシュファイルか、もしくはEmacsが編集中にキャッシュファイルが出てしまったりするせいか、watchのエラーがコンソール上にワラワラ出てしまうのですが。

f:id:umi-uyura:20150502154457p:plain

とりあえずLivereload自体はできていますし、プログラム自体の動作には影響なさそうなので、ひとまずそのまま。

それ以外の方法

NW.jsのWikiには、それ以外の方法として以下の3つの例が載っていました。

一見したところのコード量は、最も簡単なLivereloadと大きく変わらない印象ですが、より細かい制御ができるのだと思うので、必要があれば試してみようかと思います。

参考