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用法範例)

Gulp.js 使用流程

Gulp 使用步驟：

Note： Gulp需要先安裝 nodejs。


1. 安裝gulp至全域環境

• $ sudo npm install gulp -g

2. 將gulp安裝於專案目錄下 (會安裝gulp的node model  於 local)

• $ npm install gulp --save-dev
  
  note : --save-dev 會將glup寫入package.js
         若是沒有package.js 可利用 npm init 產生。
  

3. 安裝 gulp 外掛套件

• $ npm install  --save-dev
  ex : $ npm install gulp-coffee --save-dev
  //安裝coffeeScript的編譯模組

4. 建立並且編寫 gulpfile.js 檔

    Note :  gulpfile.js 是 gulp 用來執行些什麼工作任務的依據設定。


5. 運行 gulp

• 於gulpfile.js所在執行 ：$  gulp

參考資料：

• gulp官網
• gulp入門指南
• The streaming build system Gulp
• Gulp.js—比Grunt更易用的前端构建工具
• Gulp.js：比 Grunt 更简单的自动化的项目构建利器
• Gulp：任务自动管理工具
• Gulp安装及配合组件构建前端开发一体化
• Gulp 初體驗