SCSS開發的LiveReload議題


LiveReload的中文是"即時/自動重新載入"的意思,指的是在撰寫SASS/SCSS時,在編輯時立即在瀏覽器進行重新載入然後預覽的工作。這個工作原本是個手動或半自動的流程,也就是"編譯成CSS->重新在瀏覽器中重新載入",透過一些機制設定過可以自動來作這件事。

軟體/App(付費)

付費軟體都有提供即時重新載入的功能:

  • LiveReload: Mac($9.99元),支援Mac/Windows。用Chrome外掛與標記來搭配使用。它也可以搭配VM或CMS來使用。
  • CodeKit: Mac($32元),檔案類型支援相當廣泛,大概前端會用到的各種框架與語言都可以作編譯與處理。
  • Prepros: $29元,支援Mac/Windows/Linux。內建伺服器。
  • Ghostlab: $49元,支援Mac/Windows。除了編譯外,重點是在測試多種瀏覽器品牌。
  • Hammer: Mac($19.99元)。編譯與重新載入。

Ruby方式

如果你主要是使用Ruby或ROR開發,可以使用這個方式,這個方式是使用guard套件,以下有幾篇教學:

Node方式

Node方式通用於各種情況與平台。個人覺得剛開始學習用這個live-server就好了。如果你要搭配專門的開發環境,用browser-sync+gulp或webpack。

影片示範

live-server

live-server這是個小型簡單的node伺服器,沒什麼太複雜的設定。如果你的專案只需要對html與css的修改即時重新載入,用這個就可以了。上面的示範影片就是使用這個,不過它是用atom中的一個名稱為atom-live-server的套件。

browser-sync + gulp

browser-sync是一個小型的伺服器,也可以以proxy的方式與其他伺服器整合,與gulp工作流程執行器相整合,可以達成很多專屬應用情況的自動工作,簡單的情況也是可以使用:

gulp工作流程執行器,並不是單純作編譯這件事而已,可以在流程中加入進行壓縮、編譯為CSS、輸出sourcemap各種工作串接在一起。

webpack

如果JavaScript專案是使用webpack作為基礎開發的平台,用它當然是最方便的。webpack本身就有熱載入器(hot reload)的機制,可以透過載入器來作這件事,不過設定上似乎需要花點時間,網路上有很多相關的討論。