快捷導(dǎo)航

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

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

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

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

安裝chrome插件

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

livereload基本使用

首先使用npm安裝livereload模塊

npm install -g livereload

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

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

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

編寫livereload腳本

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

首先，利用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());
 });
});

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