前端可視化開發-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任務，更改編輯器文本，一樣能實現實時刷新效果。

---

好了，這款工具就介紹到這裏了，但願各位喜歡。