JS:如何使用 gulp 在檔案變動時觸發執行?

如何使用 gulp 在檔案變動時觸發執行?

結論:

利用 glup 內定的 watch 方法. 首先, 編輯一個gulpfile.js檔案. 建立一個名為 watch 的 task(作業). 如下,

var gulp = require('gulp');

var include = "/包含的路徑";
var exclude = "!/除外的路徑";
// 使用前置的 `!` 來排除不監控的路徑

/* 有變動後要執行的函式 */
var exec = function(e){
    console.log('file', e.path, 'was', e.type);
}

gulp.task('watch', function(){
    gulp.watch([include, exclude], exec);
//gulp.watch(glob [, opts], tasks) or 
//gulp.watch(glob [, opts, cb])    
//glob 可以為 String 或 Array
})

然後, 在命令列執行 gulp watch.

廢話:

老大哥在看著你. 呃! 這個梗太老了. 電腦資訊處理的技術發達的現在, 無時無刻都有許多資訊要監看, 但一直看也不是辦法, 該出手時, 還是得出手.

為了節省大家的時間, 我們經常希望在 事情 檔案有變時, 能夠被通知, 或最好有人自動去做一些該做的事.

正文:

雖然主題是"如何使用 gulp 在檔案變動時觸發執行?", 實際上不用 gulp 也是可以的. 使用 gulp 只是為了利用 gulp 中的 task 管理, 同樣的程式碼稍做改寫, 也能純由 node 來呼叫執行. 當然, 同樣的事可以用各種語言實作, 或乾脆寫個 shell script 也行, 只需要用 while +find. 而 find 的用法可以參考如何找到有特定內容的檔案名稱?

重點是利用 gulp.watch 這個方法來監控檔案變動. 詳見結論.

但 gulp.watch 的效率有些不好, 在針對大量的檔案時, 有反應時間太久與占用太多CPU時間的問題. 建議改用chokidar. 如果你需要用到gulp.pipe 也可以使用gulp-watch, 他封裝了 chokidar.

上述提及的 gulp.watch 或 chokidar 都支援 glob 樣式的通配符(wildcard character)來進行檔案的指定或排除.

在 unix 類的系統中經常用 glob 來處理檔案名稱, 例如 ls *.txt 就是列出所有以 .txt 結尾的檔案. 常用的通配符有 *, ?, 和 [...], 看起來很像正規表示式( regexp), 但 glob 不是 regexp, glob 不是 regexp. 因為很重要, 所以要說兩遍.

* 在 glob 中指的是可替代任意多(包括沒有)個任意字元. 而在 regexp 則只是 零個或任意多個. 簡單舉例, 要查目錄內以 .txt 附檔名結尾的檔案,

// glob, 
> ls *.txt
// regexp,
> ls | grep '.*\.txt'

由範例可看出, glob 中 * 是用來替代任意字元, 所以不須指定是要代替哪一個字元. 但 regexp的 * 是指任意多個, 所以前面要有一個代表任意字元 的 . 來指示是任意多個任意字元.

同樣的, glob 的 ? 是替代任 一 字元, regexp 的 ? 是指零個或一個.

[…] 在 glob 是指吻合[]中的任一個即可. 與 regexp 一樣, 但在不吻合[]中的任一個字的否定語法上, glob 使用 [!...] 而 regexp使用 [^...], 兩者是不一樣的.