前言：搜了半天，各種推薦，什么十大工具啦、優秀工具集合啦之類的咸淡文章，就是沒有一個講怎么弄的。配合官網的article自己研究了半天總算配置好了。順便吐槽下官網關于sass/less設置這塊說的模糊不清的。寫個教程給大家，相信會對新手們有幫助的。
聲明：本文不涉及Grunt。
開發環境：windows7
編輯器：sublime text3
瀏覽器：Firefox31
一般前端寫頁面，修改了html or CSS要想看效果通常就得 Alt+Tab，切換到瀏覽器，然后F5刷新，時間久了….
前端自動化一類的工具就是為了把雙手從這些反復的，無意義的操作中拯救出來?，F在網上的方案很多，我在這里介紹的LiveReload就是一款這樣的工具，它可以監聽你設置的文件夾中文件的改變，若是文件內容有改變，它會自動刷新瀏覽器。 LiveReload ![image[4]](http://s1.vevb.com/20150728/aufyw4ht13503.png "image[4]"){kind=small}
首先我們需要在本地安裝一個LiveReLoad的軟件，瀏覽器也需要安裝一個liveReLoad的插件。
首先打開官網： http://feedback.livereload.com/
在首頁的中部有教程文章，
點開第一個，開始安裝之旅
在win平臺：
點擊Download an alpha version，
下載下來的是一個400+KB的在線安裝程序，點擊后他會自動在線下載安裝LiveReload，安裝完成后的軟件長這個樣子，點擊add圖標，可以添加環境文件夾
接下來是瀏覽器的設置，我已firefox31為例，其他瀏覽器略有不同，具體請去官網查看相關文章。
要實現瀏覽器的LiveReload的話，有兩種方式，一種是，當你添加了一個環境文件夾時候
點擊integration，到達如上的界面。方式1是可以設置在線刷新，此處我們不講，我們看方式2。
方式2可以設置本地刷新，方式2有兩種方式，
第一種：添加文件夾后，它會生成一段如上圖所示的js代碼，這段代碼的內容是我們添加的環境文件夾的路徑。把這段代碼拷貝到html文件的<head></head>里就可以了。
或者
第二種：我們為firefox安裝一個LiveReLoad的擴展插件。地址：http://feedback.livereload.com/knowledgebase/articles/86242-how-do-i-install-and-use-the-browser-extensions-
點擊紅框處為firefox安裝插件。從上文我們也可以看出，safari是不支持本地的fire//:地址的，Chrome則需要開啟相關功能。而firefox則原生支持。
重啟firefox后，插件安裝完成
切記！firefox的Mozilla商店中的LiveReload插件版本很老已經不可再用，需要在官網下載的插件才行。
這樣軟件配置就完成了，接下來我們試試好不好用。
首先說明一下，LiveReload是支持編譯sass/less的，所以我們可以直接編輯sass/less也是可以的。
添加完文件夾后，依次點擊 文件夾—action+files
我們也可看出開LiveReload的編譯功能是很強大的！
對于less，勾選foo/**/*.sass 后綴名是都是.sass，不用管，看到上面的compile less ，其實勾選這個是編譯less，雖然寫的是后綴名是.sass。
它編譯less默認生成的是名字為styles.css的css文件，與less文件在同一級目錄
測試代碼如下：
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cmn-Hans-CN"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <link rel="stylesheet" href="styles.css" /></head><body> <div class="test">我是clsss:test所在的DIV 我是修改后的 再試一遍 </div></body></html>
less:
@width:300px;@height:200px;.test{ width:@width; height:@height; background-color: #ttt;}最后測試效果，上兩個GIF圖:
解放你的F5吧！
如果有雙屏的話，調試起來肯定爽歪歪。
新聞熱點
疑難解答
