快捷導(dǎo)航

livereload工具實現(xiàn)前端可視化開發(fā)【推薦】

更新時間：2016年12月23日 15:45:40 作者：code噠噠

本文將介紹一個工具--livereload。這是一款能根據(jù)你本地文件(html、css、js)的變化，自動跟蹤刷新瀏覽器的實時刷新工具，有了這個工具，會大大減輕你刷新頁面的工作量。下面跟著小編一起來看下吧

在前端開發(fā)中，我們會頻繁的修改html、css、js，然后刷新頁面，開效果，再調(diào)整，再刷新，不知不覺會浪費掉我們很多時間。有沒有什么方法，我在編輯器里面改了代碼以后，只要保存，瀏覽器就能實時刷新。經(jīng)過不懈的努力，發(fā)現(xiàn)了這么一個工具--livereload。這是一款能根據(jù)你本地文件(html、css、js)的變化，自動跟蹤刷新瀏覽器的實時刷新工具，有了這個工具，會大大減輕你刷新頁面的工作量。

安裝chrome插件

這個就不做詳細(xì)解釋了，去chrome商店，下載安裝livereload這么一個插件，安裝完成后，瀏覽器上會出現(xiàn)這么一個小圖標(biāo)，就表示插件安裝成功了。

livereload基本使用

首先使用npm安裝livereload模塊

npm install -g livereload

在網(wǎng)站的當(dāng)前目錄運行命令行，輸入livereload命令，會出現(xiàn)如下

這就證明livereload已經(jīng)運行成功，我們還可以看到chrome上的小圖標(biāo)會變成實心狀態(tài)，代表連接成功。

然后我們在網(wǎng)站編輯器中改變響應(yīng)文字，保存，瀏覽器就可以自動刷新了。是不是很方便？

編寫livereload腳本

上面只是實現(xiàn)了livereload的基本功能。實際上，livereload也可以編寫腳本運行。

首先，利用npm安裝gulp、gulp-livereload模塊

npm init
npm install --save-dev gulp
npm install --save-dev gulp-livereload

安裝完成后，在你網(wǎng)站的根目錄新建gulpfile.js文件，然后編寫腳本

var gulp = require("gulp");
var liveReload = require("gulp-livereload");
gulp.task("watch", function (file) {
 /**
 * 監(jiān)聽livereload
 */
 liveReload.listen();
 /**
 * 監(jiān)聽文件變化，將文件流傳入liveReload模塊進(jìn)行瀏覽器刷新
 */
 gulp.watch("./*.html", function (file) {
 console.log(file);
 gulp.src("./*.html").pipe(liveReload());
 });
});

在命令窗口中運行watch任務(wù)，更改編輯器文本，同樣能實現(xiàn)實時刷新效果。