前端自動化神器LiveReload配合瀏覽器和less/sass使用方法

時間 2019-11-14

標籤前端自動化神器 livereload 配合瀏覽器 sass 使用方法欄目測試自動化简体版

原文原文鏈接

前言：搜了半天，各類推薦，什麼十大工具啦、優秀工具集合啦之類的鹹淡文章，就是沒有一個講怎麼弄的。配合官網的article本身研究了半天總算配置好了。順便吐槽下官網關於sass/less設置這塊說的模糊不清的。寫個教程給你們，相信會對新手們有幫助的。css

聲明：本文不涉及Grunt。html

開發環境：windows7前端

編輯器：sublime text3chrome

瀏覽器：firefox31windows

介紹

通常前端寫頁面，修改了html or css要想看效果一般就得 Alt+Tab，切換到瀏覽器，而後F5刷新，時間久了….瀏覽器

前端自動化一類的工具就是爲了把雙手從這些反覆的，無心義的操做中拯救出來。如今網上的方案不少，我在這裏介紹的LiveReload就是一款這樣的工具，它能夠監聽你設置的文件夾中文件的改變，如果文件內容有改變，它會自動刷新瀏覽器。 LiveReload sass

安裝：

首先咱們須要在本地安裝一個LiveReLoad的軟件，瀏覽器也須要安裝一個liveReLoad的插件。less

首先打開官網： 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吧！

若是有雙屏的話，調試起來確定爽歪歪。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。