/usr/local/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:36:in `gem_original_require': no such file to load -- em-dir-watcher/platform/nix (LoadError)
from /usr/local/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:36:in `require'
from /usr/local/lib/ruby/gems/1.8/gems/em-dir-watcher-0.9.4/lib/em-dir-watcher.rb:16
from /usr/local/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:36:in `gem_original_require'
from /usr/local/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:36:in `require'
from /usr/local/lib/ruby/gems/1.8/gems/livereload-1.6/bin/../lib/livereload.rb:2
from /usr/local/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:55:in `gem_original_require'
from /usr/local/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:55:in `require'
from /usr/local/lib/ruby/gems/1.8/gems/livereload-1.6/bin/livereload:3
from /usr/local/bin/livereload:19:in `load'
from /usr/local/bin/livereload:19
會出現這錯誤訊息的原因是在 Ruby 偵測 OS 的時候出現問題
module EMDirWatcher
PLATFORM = ENV['EM_DIR_WATCHER_PLATFORM'] ||
case Config::CONFIG['target_os']
when /mswin|mingw/ then 'Windows'
when /darwin/ then 'Mac'
when /linux/ then 'Linux'
else 'Nix'
end
end
# 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{.+\.(css|js|html)})
watch(%r{(.+\.css)\.s[ac]ss}) { |m| m[1] }
watch(%r{(.+\.js)\.coffee}) { |m| m[1] }
watch(%r{config/locales/.+\.yml})
end
可以看到 LiveReload 會偵測 css js html s[ac]ss coffee script 都可以。此步驟是用在 FreeBSD 機器,如果是 Linux 請參考以下步驟
LiveReload 使用
經過上面步驟安裝 LiveReload 後,接著來介紹如何在 Server 端使用 LiveReload,這指令會在 Server 端開啟一個 port 好讓 Client 端連接上,底下是建立方法。
Version: 1.6 (compatible with browser extension versions 1.6.x)
Port: 35729
Watching: /var/www/html/Client
- extensions: .html .css .js .png .gif .jpg .php .php5 .py .rb .erb
- live refreshing disabled for .js: will reload the whole page when .js is changed
- excluding changes in: */.git/* */.svn/* */.hg/*
- with a grace period of 0.05 sec after each change
LiveReload is waiting for browser to connect.
以及會在目錄底下產生 .livereload 隱藏檔,檔案內容可以針對不想要偵測哪些檔案或者是目錄分別做設定,相當方便,此原理是偵測 server 端修改檔案,透過 web socket 通知 client browser reload 網頁,解決掉手動 reload 網頁時間,同時也支援 server side language: PHP , CompassSASSLess.js …等。
Client 端安裝
至於 Web Browser 就是安裝 Plugin,且設定 Web Host 及 port 就可以連接上了,目前官方提供了 FireFox, Safari, Google Chrome 等三者瀏覽器 plugin
Pingback: Front End Engineer 前端設計師必備工具 Live.js | 小惡魔 - 電腦技術 - 工作筆記 - AppleBOY()
Pingback: LiveReload – 即時更新 browser 的網頁開好工具 | brooky's blog()
Pingback: Windwos 下安裝 Web Developer tool LiveReload | 小惡魔 - 電腦技術 - 工作筆記 - AppleBOY()