前端可視化開發-livereload

在前端開發中，我們會頻繁的修改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 init
npm install --save-dev gulp
npm 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任務，更改編輯器文本，同樣能實現實時刷新效果。

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