前言：搜了半天，各種推薦，什么十大工具啦、優(yōu)秀工具集合啦之類(lèi)的咸淡文章，就是沒(méi)有一個(gè)講怎么弄的。配合官網(wǎng)的article自己研究了半天總算配置好了。順便吐槽下官網(wǎng)關(guān)于sass/less設(shè)置這塊說(shuō)的模糊不清的。寫(xiě)個(gè)教程給大家，相信會(huì)對(duì)新手們有幫助的。
聲明：本文不涉及Grunt。
開(kāi)發(fā)環(huán)境：windows7
編輯器：sublime text3
瀏覽器：Firefox31
一般前端寫(xiě)頁(yè)面，修改了html or CSS要想看效果通常就得 Alt+Tab，切換到瀏覽器，然后F5刷新，時(shí)間久了….
前端自動(dòng)化一類(lèi)的工具就是為了把雙手從這些反復(fù)的，無(wú)意義的操作中拯救出來(lái)。現(xiàn)在網(wǎng)上的方案很多，我在這里介紹的LiveReload就是一款這樣的工具，它可以監(jiān)聽(tīng)你設(shè)置的文件夾中文件的改變，若是文件內(nèi)容有改變，它會(huì)自動(dòng)刷新瀏覽器。 LiveReload ![image[4]](http://s1.vevb.com/20150728/aufyw4ht13503.png "image[4]"){kind=small}
首先我們需要在本地安裝一個(gè)LiveReLoad的軟件，瀏覽器也需要安裝一個(gè)liveReLoad的插件。
首先打開(kāi)官網(wǎng)： http://feedback.livereload.com/
在首頁(yè)的中部有教程文章，
點(diǎn)開(kāi)第一個(gè)，開(kāi)始安裝之旅
在win平臺(tái)：
點(diǎn)擊Download an alpha version，
下載下來(lái)的是一個(gè)400+KB的在線安裝程序，點(diǎn)擊后他會(huì)自動(dòng)在線下載安裝LiveReload，安裝完成后的軟件長(zhǎng)這個(gè)樣子，點(diǎn)擊add圖標(biāo)，可以添加環(huán)境文件夾
接下來(lái)是瀏覽器的設(shè)置，我已firefox31為例，其他瀏覽器略有不同，具體請(qǐng)去官網(wǎng)查看相關(guān)文章。
要實(shí)現(xiàn)瀏覽器的LiveReload的話，有兩種方式，一種是，當(dāng)你添加了一個(gè)環(huán)境文件夾時(shí)候
點(diǎn)擊integration，到達(dá)如上的界面。方式1是可以設(shè)置在線刷新，此處我們不講，我們看方式2。
方式2可以設(shè)置本地刷新，方式2有兩種方式，
第一種：添加文件夾后，它會(huì)生成一段如上圖所示的js代碼，這段代碼的內(nèi)容是我們添加的環(huán)境文件夾的路徑。把這段代碼拷貝到html文件的<head></head>里就可以了。
或者
第二種：我們?yōu)閒irefox安裝一個(gè)LiveReLoad的擴(kuò)展插件。地址：http://feedback.livereload.com/knowledgebase/articles/86242-how-do-i-install-and-use-the-browser-extensions-
點(diǎn)擊紅框處為firefox安裝插件。從上文我們也可以看出，safari是不支持本地的fire//:地址的，Chrome則需要開(kāi)啟相關(guān)功能。而firefox則原生支持。
重啟firefox后，插件安裝完成
切記！firefox的Mozilla商店中的LiveReload插件版本很老已經(jīng)不可再用，需要在官網(wǎng)下載的插件才行。
這樣軟件配置就完成了，接下來(lái)我們?cè)囋嚭貌缓糜谩?/p>
首先說(shuō)明一下，LiveReload是支持編譯sass/less的，所以我們可以直接編輯sass/less也是可以的。
添加完文件夾后，依次點(diǎn)擊 文件夾—action+files
我們也可看出開(kāi)LiveReload的編譯功能是很強(qiáng)大的！
對(duì)于less，勾選foo/**/*.sass 后綴名是都是.sass，不用管，看到上面的compile less ，其實(shí)勾選這個(gè)是編譯less，雖然寫(xiě)的是后綴名是.sass。
它編譯less默認(rèn)生成的是名字為styles.css的css文件，與less文件在同一級(jí)目錄
測(cè)試代碼如下：
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;}最后測(cè)試效果，上兩個(gè)GIF圖:
解放你的F5吧！
如果有雙屏的話，調(diào)試起來(lái)肯定爽歪歪。
新聞熱點(diǎn)
疑難解答
圖片精選
