詳解Grunt外掛程式之LiveReload實現頁面自動重新整理（兩種方案）_php執行個體

方案一：grunt-livereload + Chrome Plug-in

優點：安裝、配置簡單方便。
缺點：需要配合指定的瀏覽器外掛程式（Firefox也有相關外掛程式，IE麼你懂的）。

1. 需要安裝2個插接件：grunt-contrib-watch、connect-livereload

執行命令：

複製代碼 代碼如下:
npm install --save-dev grunt-contrib-watch connect-livereload

2. 安裝瀏覽器外掛程式：Chrome LiveReload

3. 配置一個Web伺服器（IIS/Apache），LiveReload需要在本機伺服器環境下運行（對file:///檔案路徑支援並不是很好）。

4. 修改Gruntfile.js檔案：

module.exports = function(grunt) { // 項目配置(任務配置) grunt.initConfig({  pkg: grunt.file.readJSON('package.json'),  watch: {   client: {    files: ['*.html', 'css/*', 'js/*', 'images/**/*'],    options: {     livereload: true    }   }  } }); // 載入外掛程式 grunt.loadNpmTasks('grunt-contrib-watch'); // 自訂任務 grunt.registerTask('live', ['watch']);};

5. 執行：grunt live

看到如下提示，說明已經開始監聽任務：

複製代碼 代碼如下:
Running "watch" task
Waiting...

6. 開啟我們的頁面，例如：http://localhost/

7. 再點擊Chrome LiveReload外掛程式的ICON，此時ICON圓圈中心的小圓點變成實心的，說明外掛程式執行成功。此時你改下網站檔案看看，是不是即時更新了？

方案二：grunt-contrib-watch + grunt-contrib-connect + grunt-livereload

優點：自動搭建靜態檔案伺服器，不需在自己電腦上搭建Web伺服器。
　　　不需要瀏覽器外掛程式的支援（不現定於某個瀏覽器）。
　　　　不需要給網頁手動添加livereload.js。
缺點：對於剛接觸的人，配置略顯複雜。

1. 安裝我們所需要的3個外掛程式：grunt-contrib-watch、grunt-contrib-connect、connect-livereload

執行命令：

複製代碼 代碼如下:
npm install --save-dev grunt-contrib-watch grunt-contrib-connect connect-livereload

2. 修改Gruntfile.js檔案：

module.exports = function(grunt) { // LiveReload的預設連接埠號碼，你也可以改成你想要的連接埠號碼 var lrPort = 35729; // 使用connect-livereload模組，產生一個與LiveReload指令碼 //  var lrSnippet = require('connect-livereload')({ port: lrPort }); // 使用 middleware(中介軟體)，就必須關閉 LiveReload 的瀏覽器外掛程式 var lrMiddleware = function(connect, options) {  return [   // 把指令碼，注入到靜態檔案中   lrSnippet,   // 靜態檔案伺服器的路徑   connect.static(options.base[0]),   // 啟用瀏覽目錄(相當於IIS中的瀏覽目錄)   connect.directory(options.base[0])  ]; }; // 項目配置(任務配置) grunt.initConfig({  // 讀取我們的項目配置並儲存到pkg屬性中  pkg: grunt.file.readJSON('package.json'),  // 通過connect任務，建立一個靜態伺服器  connect: {   options: {    // 伺服器連接埠號碼    port: 8000,    // 伺服器位址(可以使用主機名稱localhost，也能使用IP)    hostname: 'localhost',    // 實體路徑(預設為. 即根目錄) 註：使用'.'或'..'為路徑的時，可能會返回403 Forbidden. 此時將該值改為相對路徑 如：/grunt/reloard。    base: '.'   },   livereload: {    options: {     // 通過LiveReload指令碼，讓頁面重新載入。     middleware: lrMiddleware    }   }  },  // 通過watch任務，來監聽檔案是否有更改  watch: {   client: {    // 我們不需要配置額外的任務，watch任務已經內建LiveReload瀏覽器重新整理的程式碼片段。    options: {     livereload: lrPort    },    // '**' 表示包含所有的子目錄    // '*' 表示包含所有的檔案    files: ['*.html', 'css/*', 'js/*', 'images/**/*']   }  } }); // grunt.initConfig配置完畢 // 載入外掛程式 grunt.loadNpmTasks('grunt-contrib-connect'); grunt.loadNpmTasks('grunt-contrib-watch'); // 自訂任務 grunt.registerTask('live', ['connect', 'watch']);};

5. 執行：grunt live

看到如下提示，說明Web伺服器搭建完成，並且開始監聽任務：
複製代碼 代碼如下:
Running "connect:livereload" (connect) task
Started connect web server on 127.0.0.1:8000.

Running "watch" task
Waiting...

註：執行該命令前，如果你有安裝過LiveReload的瀏覽器外掛程式，必須關閉。

6. 開啟我們的頁面，例如：http://localhost:8000/ 或 http://127.0.0.1:8000/
註：這裡所開啟的本機伺服器地址，是我們剛才通過connect所搭建的靜態檔案伺服器位址，而不是之前你用IIS或Apache自己搭建Web伺服器位址。

以上就是本文詳解Grunt外掛程式之LiveReload實現頁面自動重新整理（兩種方案），希望大家喜歡。

