Node.js guard

介紹

guard 是一個 node.js 的套件, 它可以偵測資料夾下面的檔案發生變動然候再去做相對應的事, 修改的檔案變動就 reload 瀏覽器或執行一段 shell

Install rvm

首先要先安裝 rvm, 我們再利用 rum 安裝 guard

[1] Install

sudo apt-get update
sudo apt-get install curl
curl -L https://get.rvm.io | bash -s stable --auto-dotfiles

如果執行失敗照著指示做 gpg --keyserver hkp://keys.gnupg.net --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3, 然候再執行一次安裝指令

[2] Exec source /etc/profile.d/rvm.sh

rvm requirements

[3] Install ruby

rvm install ruby
rvm use ruby --default

[4] Install RubyGems

rvm rubygems current

安裝 guard 及 guard-livereload

guard 是偵測檔案變動你再跟它說要做什麼事

guard-livereload 是利用 guard 偵測檔案發生變動就 reload 瀏覽器

[1] 安裝 guard-livereload

sudo apt-get install ruby-dev make build-essential g++
gem install guard
gem install guard-livereload

gem install 不要用 sudo, 否則執行時會報錯, 詳細原因參考這裡

[2] 執行 guard init livereload 會在目錄下產生一個 Guardfile, 裡面定義一些偵測的規則

Guardfile (修改後) :

guard 'livereload' do
  watch(%r{app/controllers/.+\.rb})
  watch(%r{app/models/.+\.rb})
  watch(%r{app/views/.+\.(erb|haml|slim)$})
  watch(%r{app/helpers/.+\.rb})
  watch(%r{public/.+\.(css|js|html)})
  watch(%r{config/locales/.+\.yml})
  # Rails Assets Pipeline
  watch(%r{(app|vendor)(/assets/\w+/(.+\.(css|js|html|png|jpg))).*}) { |m| "/assets/#{m[3]}" }
end

[3] 下載 livereload chrome extension

[4] 點擊 extension 讓 livereload 與 guard-livereload 連接

• 如果是用本機開發 :
  • 執行 guard, 再到 chrome 打開 livereload extension 就好了
• 如果是用 ssh 連到主機開發 :
  • 1. 執行 guard, 預設 port 是 35729 (注意! server 要記得開放 35729 port)
  • 2. 利用 ssh 的 port forwarding 將主機的 35729 導到本機的 35729, 參考 SSH 設定 - Port Forwarding 部份
  • 3. 再到 chrome 打開 livereload extension

[5] 完成, 只要 guard 偵測到 server 端的檔案有異動就會自動通知 livereload chrome extension 做 reload

偵測檔案變動並執行特定指令

[1] Install : gem install guard-shell

[2] Exec : guard init shell

Guardfile :

guard :shell do
  watch(/(.*).cpp/) {|m| `g++ #{m[0]} -o runMe && ./runMe` }
end

.cpp 變動自動編譯

偵測 golang 檔案變動

Install : gem install guard-go

偵測 php 檔案變動

所有 *.php 設定 :

guard 'livereload' do
  watch(%r{.+\.(php)$})
end

ci 設定 :

guard 'livereload', :grace_period => 0 do
  watch(%r{application/.+\.(php)$})
  watch(%r{public/.+\.(css|js)})
end

laravel 設定 :

guard 'livereload', :grace_period => 0 do
  watch(%r{app/.+\.(php)$})
  watch(%r{public/assets/.+\.(css|js)})
end

grace_period 是指 delay 幾秒才 reload

測測 ruby 檔案變動檢查 coding style

Install : gem install guard-rubocop

Exec : guard init rubocop