:note

Guard をためす

監視ツールの Guard を試しました。

使い道はいろいろとありそうなのですが、まずは簡単な Sinatra アプリで試します。

Bundler を利用、Webブラウザは Google Chrome、OSXの場合。

ちなみに watchr との違いはよくわかりません

Gemfile

Develepment 環境に Guard 関係の gem を入力

Growlも使えるみたい。

source :rubygems

gem 'sinatra'
gem 'haml'

group :development do
  gem 'guard'
  gem 'rb-fsevent' # OSX固有のもの
  gem 'guard-livereload'
  gem 'guard-ego'
end

app.rb

# -*- coding: utf-8 -*-

get '/' do
  haml :index
end

config.ru

require "bundler"
Bundler.require

require "./app.rb"
run Sinatra::Application

views/index.haml

!!! 5
%html
  %head
    %title title
    %meta{:charset => 'utf-8'}
  %body
    %p Moof
$ bundle install
$ guard init # で空の Guardfile が生成される

$ guard init livereload
> livereload guard added to Guardfile, feel free to edit it

でテンプレートが Guardfile に書き込みされる guards が Rails 用なので Sinatra 用のルートを追記する

Guardfile

# A sample Guardfile
# More info at https://github.com/guard/guard#readme

guard 'livereload' do
  watch(%r{app/.+\.(erb|haml)})
  watch(%r{app/helpers/.+\.rb})
  watch(%r{(public/|app/assets).+\.(css|js|html)})
  watch(%r{(app/assets/.+\.css)\.s[ac]ss}) { |m| m[1] }
  watch(%r{(app/assets/.+\.js)\.coffee}) { |m| m[1] }
  watch(%r{config/locales/.+\.yml})

  # sinatra
  watch(%r{.+\.rb})
  watch(%r{views/.+\.(haml|sass|css)})
end

Google Chrome 用のExtensionをインストールしておく

LiveReload - Chrome Web Store

guard を起動していないで LiveReload を使おうとすると

Guard をためす /images/2011/08/guard_not_active.png

LiveReload Cannot connect to LiveReload server: ws://localhost:35729/websocket

と怒られるので

$ guard して LiveReload ボタンをクリックして有効に、Enable LiveReload だと緑色にかわる

Guard をためす /images/2011/08/activ_livereload.png

これで Projectフォルダ内の .haml や .sass ファイルをいじるとWebブラウザがリロードしてくれるようになります。便利!

Guardfile を書き換えたら guard の再起動が必要なのですが guard-ego を入れておくと自動的に再起動してくれます。便利!

普通に静的ファイルのときでも使えるので色々試してみたい。

参考にした

 
comments powered by Disqus
back to top