LiveReloadX に少し手を入れて Grunt のタスクとして動作させられるようにした。

今回のバージョンは 0.3.0。新規インストールするなら今まで通り npm install -g livereloadx で、バージョンアップするなら npm update -g livereloadx でどうぞ。

設定手順は LiveReloadX の「Run as a Grunt Task」あたりを参照してもらうとして、この記事では実装した背景を説明しておこう。

Grunt に対応させる価値

Grunt は、サイトの生成にあたっての必要な処理をひとまとめにできるのでとても便利である。そこに live reload する機能まで含んでいればさらに便利そうである。

といっても、実は、公式の grunt-contrib-watch プラグインに live reload 機能はついている。

じゃあ、公式でよさそうなのだけど、公式を使うためには「HTML に JavaScript のスニペットを埋め込む」か「ブラウザ拡張を導入する」必要がある。grunt-contrib-watch のページに connect-livereload を使う方法も紹介されてるが、そっちは少し煩雑そうだった。

LiveReloadX の一番のウリが static モードと proxy モードで、JavaScript スニペットの埋め込みを Web サーバー側でやってくれる。この機能を使いたかったので、LiveReloadX 自体を Grunt に組み込んでみた。

組み込むにあたっては、Grunt のドキュメントを見たり、各種プラグインのソースを見たりすれば、だいたいの方法は分かったので、比較的簡単に対応できた。

ブログ書くのがさらに手軽になった

個人的には、今回の機能によって、ブログを書くのがとても楽になった。

いままでは、このブログを書くにあたって、jekyll と livereloadx を個別に実行していた。

以前、Jekyll で --watch の代わりに Grunt を使ってみるテスト で書いたとおり、Jekyll を Grunt から使うことには成功していた。今回、LiveReloadX も組み合わせられるようになった。

つまり、grunt と実行するだけで

• Web サーバーが起動して、Jekyll のビルド結果を確認できる
• Markdown 記法の記事をテキストエディターから編集したら、jekyll が走って HTML を生成する。
• 表示しているページの HTML や画像が生成されたら、自動でブラウザーがリロードされる

という環境が整った。

このブログのソースコードは nitoyon/tech.nitoyon.com - GitHub を参照してほしい。

理想のブログ環境に近づいてきた。