develog.me

into VR

Octopressでプレビュー作業の決定版。ブラウザでプレビューを自動リロード表示！(octopress+guard-livereload)

Blogへ記事を投稿。ローカルの確認作業をがんばらない

編集している記事の内容を、即座にブラウザでプレビュー表示できるようにします。
またemacs引きこもりなので、ブラウザを自動的にリロードさせて最新のプレビューを表示するようにもします。

検証環境

  • Mac
  • chrome

作業フロー比較

Before

  1. プレビュー用にWEBrick起動
    1. console に移って % rake preview
    2. browser に移って http://localhost:4000 にアクセスして確認
  2. console で記事を作る % rake new_post
  3. 以下 めんどくさい ループ
    1. emacs で記事を編集
    2. console に移って % rake preview 再起動で変更内容を反映
    3. browser に移って http://localhost:4000 にアクセスして確認
  4. okならば console から % rake gen_deploy で投稿

After

  1. 変更内容を自動的に読み込ませる。毎回の % rake preview が不要になる。
    1. console に移って % rake watch
  2. プレビュー用にWEBrick起動
    1. console に移って % rake preview
    2. browser に移って http://localhost:4000 にアクセスして確認
  3. console で記事を作る % rake new_post
  4. 以下 めんどくさくない emacs ひきこもりループ
    1. emacs で記事を編集・編集・編集！ emacs で保存の度に browser が勝手にリロード。最新の内容をプレビュー表示
  5. okならば console から % rake gen_deploy で投稿

導入手順

まずは、 /octopress に移動して、 % rake watch で、 _posts ディレクトリに変更があったら自動的に静的ページを public 以下へ生成するようにします。
次に、 gem gurad (指定ディレクトリの変更を監視。変更があったら任意のコマンドを実行） の、任意コマンド→ browser の自動リロードを行う、 gem gurad-livereload を使います。

gem gurad の導入

% cd octopress

gem追加 

% emacs Gemfile
 group :development do
   ...
+  gem 'guard'
+  gem 'guard-livereload'
 end

% bundle

console を新規に開く

Guardの設定。監視ディレクトリ指定 

% guard init livereload
% emacs Guardfile

guard 'livereload' do
  watch(%r{public/.+\.(css|js|html)})
end

browser にプラグイン導入

Chrome extension on the Chrome Web Store 今回の検証環境。おすすめ

Safari extension 2.0.9

Firefox extension 2.0.8

最新情報はこちらで LiveReload Help & Support How do I install and use the browser extensions?

早速使ってみる

  1. console
    • 記事の変更で静的コンテンツ自動生成仕込む 
      % cd octopress
% rake watch
    • 記事の静的コンテンツ自動生成監視でブラウザ自動リロード仕込む 
      % cd octopress
% guard
  2. browser
    • chromeの場合は livereload の設定については特に不要。 右上のアイコンがconnectedのようになって、 % guard で、 INFO - Browser connected. といったメッセージが表示されていればOK
  3. emacs
    • 以降は、 .markdown を保存すれば、フォーカスを移してブラウザのリロードボタンを押さずとも、 裏で自動的にブラウザがリロードされて、最新のプレビューが表示されます。