Gulp - 監聽檔案和 Live-reload

Gulp 是可以幫助你自動化作業的工具，這篇筆記紀錄監聽檔案事件編寫和 Live-reload 使用。
安裝 Gulp

npm install gulp -g

npm install gulp -D

npm install --save-dev gulp-livereload

Gulpfile.js
gulpfile.js 會在 gulp 指令啟動時去查找作業流程。

var gulp = require('gulp'),
    gulpLivereload = require('gulp-livereload');  // 載入 gulp-livereload

gulp.task('watch', function () { //gulp `watch` 指令會找到這個 task
    gulpLivereload.listen();
    gulp.watch('./*.*',['reload-task']);  //指定目錄，及處理的事件有誰 (陣列)
});


gulp.task('reload-task', function () {   //註冊一個處理事件
    gulp.src('./*.*')    // 指定要處理的檔案目錄
  .pipe(gulpLivereload());  // 變更檔案後自動重新載入頁面
});

Chrome Live-reload 

請從這裡安裝: https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei/related

然後在 Chrome 按下這個按鈕，就可以開始監聽 Live-reload 事件。

啟動指令

gulp watch

這個 watch 是剛剛寫的 task 事件名稱，如果換剛剛寫的 reload-task ，也會正常啟動這個 task，但是由於 reload-task 這個任務沒有 livereload 的監聽事件，所以只會執行一次，就結束了。

Reference:
http://gulpjs.com/
https://kejyuntw.gitbooks.io/gulp-learning-notes/content/plguins/Tool/Plugins-Tool-gulp-livereload.html