一、gulp.watch()功能介紹

舉例說明：當’./src/*.html’發生變化時，執行’html’任務，同時重新整理瀏覽器。如下：

    gulp.task('watch', function(){
        gulp.watch('./src/*.html', ['html']).on('change', browserSync.reload);
    });

二、gulp.watch()功能限制及解決方案

gulp.watch()無法監聽到新增加的檔案，這樣一來，我們每次增加檔案時都要執行gulp命令來重啟服務。這並不是我們希望的結果。可以引入gulp-watch模組解決這個問題：

三、安裝gulp-watch，監聽檔案改變、新增、刪除

    npm i -D gulp-watch

四、gulp-watch使用

1、gulp-watch引數說明

    /**
    *   @param glob 需要監聽的檔案
    *   @param options 
    *   @param callback 監聽的檔案發生變化後執行的函式
    */

    watch(glob, [options, callback])

2、gulp-watch使用

    var watch = require('gulp-watch');
 


    gulp.task('watch', function () {
        return watch('./src/**/*.html', function () {
            gulp.start('html');	//執行html任務
            browserSync.reload(); //重新整理瀏覽器
        });
    });

3、gulp-watch封裝使用

為什麼將監聽任務全部拆開，而不是統一監聽 src/ 下的檔案變化，請參照第五點的說明

    gulp.task('watch', function ()
 
 {
        w('./src/**/*.html', 'html');
        w('./src/js/**', 'js_main');
        w('./src/libs/**/*.js', 'js_libs');
        w('./src/css/**', 'css_main');
        w('./src/libs/**/*.css', 'css_libs');
        w('./src/images/**', 'images');

        function w(path, task){
            watch(path, function () {
                gulp.start(task);
                browserSync.reload();
            });
        }
    });

五、gulp-watch使用說明及要求

1、監聽檔案變化，自動打包並且自動重新整理瀏覽器。需要自動打包是因為我們的檔案引入都是直接指向打包之後的 dist/ 資料夾；

2、自動打包。要求速度要快，否則每次儲存檔案（很多程式猿習慣設定自動儲存）就自動打包，根據效能的不同可能會等待一定的時間（特別是對於大型專案）。所以

1）儘可能的將監聽任務拆開，如上；
2）減少開發模式下的功耗：比如不進行壓縮處理，特別是圖片的壓縮需要時間較長。這就需要判斷當前是開發環境還是生產環境，可繼續瀏覽後續文章；

3、瀏覽器重新整理。瀏覽器重新整理要在打包完成之後，參考後續文章：下面有連結

六、效果瀏覽