Skip to content

Instantly share code, notes, and snippets.

@norio
Created August 24, 2011 16:51
Show Gist options
  • Save norio/1168521 to your computer and use it in GitHub Desktop.
Save norio/1168521 to your computer and use it in GitHub Desktop.
SCSS変更→CSS生成→LiveReloadでCSS反映自動化
# Chromeの最新Dev版にLiveReloadをインストール
# Chromeの拡張機能管理画面でLiveReloadの「ファイルの URL へのアクセスを許可する」にチェックを入れておく
# ターミナルでguard関係のセットアップ
$ gem install rb-fsevent
$ gem install em-websocket
$ gem install guard
$ gem install guard-livereload
$ gem install guard-sass
# 作業フォルダでGuardfileを生成
$ guard init sass
$ guard init livereload
# Guardfileをファイル構成にあわせて下記のように編集
guard 'sass', :output => 'css' do
watch(%r{css/.+\.scss})
end
guard 'livereload' do
watch(%r{.+\.html})
watch(%r{(css/|js/).+\.(css|js)})
end
# 作業フォルダでguard監視開始
$ guard
# 対象ファイルをChromeで開いて LiveReload ボタンをクリックするだけ!
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment