Gulp.js plugin LiveReload

套件名稱：glup  liveReload

功用： 當在開發過程中，程式、文件有異動時，能夠讓browser自動重整。


1. 需先安裝好gulp

2. 安裝 livereload

• sudo npm install gulp gulp-livereload --save-dev

3. 安裝瀏覽器套件

• chrome  https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei 
• firefox    https://addons.mozilla.org/zh-tw/firefox/addon/livereload/

note : 若是不想使用瀏覽器套件，可以參考 How do I add the SCRIPT tag manually?

4. 編寫 gulpfile.js

var gulp = require('gulp'),

      livereload = require('gulp-livereload');

 // 'watch' 是 task 的名稱，可以任意定義名稱 
gulp.task('watch', function () {
   livereload.listen();

   // dev/**/*.*的意思是 dev下的,任何資料夾的任何文件。 gulp.watch('dev/**/*.*').on('change', livereload.changed);    
});

5.  執行命令

• gulp watch

6. 開啟 browser外掛套件

• 點擊    

7. 開啟相關頁面，當修改app下的任何文件，瀏覽器就會自動重整了。

參考資料：

• gulp 指南
• Michael Hsu.tw 的 Gulp.js-LiveReload 自動刷新頁面
• Gulp.js-livereload 不用F5了，实时自动刷新页面来开发

npm：

• gulp livereload     (內含官方API用法範例)