2016年2月4日 星期四

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

沒有留言:

張貼留言

© ERIC RILEY , 自由無須告知轉貼
Background Japanese Sayagata by Olga Libby