利用less監視模式實時預覽樣式刷新瀏覽器

【前言】此處介紹的方法只是我我的的用法，相信你們有更好更簡潔的方式。

上次寫到利用LiveReload解放F5。並且LiveReload能夠編輯sass/less/stylus。可是惋惜發現LiveReload在編譯的時候不能拋錯，這就很麻煩了，少了個標點less編譯就不過，查找起來太麻煩。

我目前的解決方法：

利用Less自帶的客戶端開發模式（development）。

在開發的時候less的編譯仍是利用客戶端瀏覽器，即

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="js/less-1.7.3.min.js" type="text/javascript"></script>

less自帶監視模式，開啓方式是在

<script src="js/less-1.7.3.min.js" type="text/javascript"></script>

的後面加入：

<script>less.watch();</script>

 

這樣的話，less就能實時監視變化並改變樣式，並且能夠拋錯。

 

還有一種方法

是利用Koala       這個軟件，先提一下，這個軟件是國內騰訊一個工程師開發的，是less官方推薦的GUI之一，這個軟件功能基本功能和LiveReload差很少，也是監控文件夾的改變。可是擴展功能和設置項更增強大，內置了編譯器能夠拋錯。你們能夠關注下，在持續開發中。

可是這個軟件不能實時刷新瀏覽器。本質上是個編譯合併壓縮工具，但願它後續能增長刷新功能。