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

安裝chrome插件

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

livereload基本使用

首先使用npm安裝livereload模塊

npm install -g livereload

在網站的當前目錄運行命令行，輸入livereload命令，會出現如下

這就證明livereload已經運行成功，我們還可以看到chrome上的小圖標會變成實心狀態，代表連接成功。

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

編寫livereload腳本

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

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

npm initnpm install --save-dev gulpnpm install --save-dev gulp-livereload

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

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

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

好了，這款工具就介紹到這里了，希望各位喜歡。

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！