使用livereload實現自動刷新

livereload是一個web開發輔助工具，當我們修改完html、css和js的時候會自動刷新瀏覽器，解放碼農的雙手。這樣在雙屏切圖、寫js代碼的時候會提高很多效率。livereload有很多版本，比如基於ruby的版本，我們今天介紹的是node+grunt+chrome插件一體化方案。

我們使用的這個livereload的基本原理是試用node開啟一個websocket服務，並且檢測文件變化，瀏覽器打開一個頁面時候，引入固定的livereload.js（chrome插件會幫忙加上）會建立ws請求，當node檢測到文件變化，則自動推送消息給瀏覽器，實現刷新。

livereload環境搭建

1. nodejs安裝
2. grunt安裝
3. grunt-contrib-watch：npm install grunt-contrib-watch –save-dev
4. grunt-livereload：npm install grunt-livereload –save-dev
5. chrome插件：安裝

編寫grunt的Gruntfile.js文件

進入項目根目錄，安裝grunt基本服務（參考grunt使用介紹），然后修改Gruntfile.js內容，添加如下：

livereload: {
    options: {
        base: 'public',
    },
    files: ['src/**/*']
}
watch: {
    all:{
        files: ['src/js/touch.js', 'src/sass/*.scss'],
        tasks: ['jshint', 'compass:dev'],
    },
    //grunt watch:js|css
    js:{
        files: ['src/js/touch.js'],
        tasks: ['jshint'],
    },
    css:{
        files: ['src/sass/*.scss'],
        tasks: ['compass:dev'],
    }
}
grunt.loadNpmTasks('grunt-livereload');
 
grunt.registerTask('live', ['livereload', 'watch:css']);

建立一個live的任務，開啟livereload服務，同時watch css任務，當css文件發生變化的時候，執行compass:dev任務（即compass編譯任務）。

執行grunt任務

當我們進行切圖（或者其他事情的時候），執行cmd進入項目目錄，執行下面命令來啟動grunt的live任務：

grunt live

瀏覽器端使用chrome插件
打開要自動刷新的頁面，例如：http://127.0.0.1/test.html，點擊chrome插件livereload的icon，仔細觀察會發現icon的中間空心圓點變成了實心的。 這樣就可以自動刷新了。

使用livereload

完成上面的步驟，這時候我們修改src/**/*下的文件就會自動刷新頁面，我修改了test.scss文件，首先觸發的是watch:css任務，執行compass:dev任務，即編譯css文件為test.css，這時觸發livereload，實現自動刷新

轉載請注明轉自  JS8.IN ™