僕のYak Shavingは終わらない

車輪の再発明をやめたらそこには壮大なYakの群れが

Re:Viewのリアルタイムプレビューをgulp/gruntのlivereloadを使わずにbrowser-syncとfswatchだけでやる

f:id:kazuph1986:20160515144004g:plain

つい先日Re:Viewを使って本の執筆をやってみたので、その時に捗るTipsを紹介します。

reviewのCLIツールのインストール

$ gem install review

browser-syncのinstall

browser-syncはローカルにあるファイルを配信し、かつファイルの変更をwatchして、更新されたらブラウザ自体も更新するものです。livereloadと違ってブラウザのextensionも必要ないので、ミニマムですぐ導入できます。python -m SimpleHTTPServer 3000などを使う際の完全なる上位互換と考えてもいいと思います。

$ npm install -g browser-sync

fswatchのinstall

fswatchは特定のファイルに変更があったときにstdoutを行うものです。pipeと組み合わせるとファイルの更新後にコマンドを実行することができます。

$ brew install fswatch

使ってみる

雛形の作成

$ review init review_test
$ cd review_test

として雛形のプロジェクトを作成します。

ファイルの編集

review_test.reというファイルができているので、これをメインに編集していきます。

HTMLの生成

次に実際にreファイルからhtmlを生成してみます。

$ rake web

これだけです。webrootというディレクトリの中にindex.html他が生成されています。

ブラウザで表示する

webroot以下をlocalhost:3000で配信しつつ、webroot以下のファイルの更新をwatchする場合は以下のようなコマンドになります。

$ browser-sync start -s "webroot" -f "webroot" &

※&はバックグラウンドで実行するためのものです。フォアグランドにする場合はfgコマンドを使います。fg後にctrl+cで終了できます。

これでファイルの変更があればブラウザが自動で表示され、webroot以下の中で更新があれば自動でブラウザがリフレッシュされます。

reファイルの修正後にHTMLを生成し直しブラウザを更新する

reファイルを弄って保存したら自動でrake webが実行されブラウザが更新されるようにします。

$ fswatch review_test.re | xargs -L1 rake web && browser-sync reload

今回はfswatchの出力自体は無視していて、単に|の右側のコマンドが実行されることだけ使っています。

xargsをつけないと、都度終了してしまうのですが、つけることでfswatchのstdoutを延々監視することが可能です。

また、browser-syncの仕様としてどうやら更新は拾えるのですが、ディレクトリが一度削除されてからもう一度生成される場合は検知ができないようです。これはreviewのrake webの仕様なのでどうしようもないと思うのですが、ちょっとハマってました。

結果的にbrowser-sync reloadによって、強制的にリロードができるようだったのでそれを使いました。

ということで

gulp/gruntを一切使わずにlivereloadが実現できました!Re:Viewを使わないときでも重宝するのではないでしょうか?