[轉載]Grunt插件之LiveReload 實現頁面自動刷新，所見即所得編輯

配置文件下載

 http://vdisk.weibo.com/s/DOlfks4wpIj

LiveReload安裝前的準備工做：

安裝Node.js和Grunt，若是第一次接觸，能夠參考：Windows下安裝Grunt的指南和相關說明，根據步驟操做，建立完package.json 和 Gruntfile.js這2個文件就行。

接下來，開始配置LiveReload所須要的環境和相關插件。這裏所提供的有兩種安裝方案，根據本身需求進行選擇。

方案一：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腳本

// <script src="http://127.0.0.1:35729/livereload.js?snipver=1" type="text/javascript"></script>

var lrSnippet = require('connect-livereload')({ port: lrPort });

// 使用 middleware(中間件)，就必須關閉 LiveReload 的瀏覽器插件

var lrMiddleware = function(connect, options) {

return [

// 把腳本，注入到靜態文件中

lrSnippet,

// 靜態文件服務器的路徑

connect.static(options.base),

// 啓用目錄瀏覽(至關於IIS中的目錄瀏覽)

connect.directory(options.base)

];

};

// 項目配置(任務配置)

grunt.initConfig({

// 讀取咱們的項目配置並存儲到pkg屬性中

pkg: grunt.file.readJSON('package.json'),

// 經過connect任務，建立一個靜態服務器

connect: {

options: {

// 服務器端口號

port: 8000,

// 服務器地址(可使用主機名localhost，也能使用IP)

hostname: 'localhost',

// 物理路徑(默認爲. 即根目錄)

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服務器地址。

7. 開始體驗吧。

相關插件文檔（GitHub）：
grunt-contrib-watch
grunt-contrib-connect
connect-livereload