使用API​​時Browsersync無法刷新更新嗎？

Question

簡短問題版本

文件更改發生在target目錄下。 我有這樣的browsersync設置：

    var bs = require("browser-sync").create();

    // Start the browsersync server
    bs.init({
        server: './target'
    });

    bs.reload("*.html");

但是，這沒有檢測到target子目錄中發生的更改並刷新了瀏覽器。 以上幾行似乎還不夠？

長問題版本

我已經建立了一個CLI。 它監視src/main/css CSS更改並將CSS（使用PostCSS）編譯為target/main/css 。 src/main/html html模板也啟用了相同的功能。

Gaze監視文件更改並運行執行編譯的功能，此部分工作正常。

完整的源代碼可以在這里看到 。

我希望BrowserSync可以在target目錄中進行文件更改並在執行編輯時刷新瀏覽器，但是我看不到任何刷新。 我在serve命令中具有類似的BrowserSync設置：

    var bs = require("browser-sync").create();

    // Start the browsersync server
    bs.init({
        server: './target'
    });

    bs.reload("*.html");

可以通過以下方式測試CLI：

git clone https://github.com/superflycss/cli
cd cli
npm i -g

或僅從NPM安裝：

npm i -g @superflycss/cli

然后運行：

sfc new project
cd project 
sfc serve

target文件夾將在瀏覽器中打開。 將URL更改為http://localhost:3000/test/html/ 。 在src/test/html/index.html編輯html。 更改編譯為target/test/html/index.html和BrowserSync應該接受更改IIUC ...但是不是...

有什么想法嗎？

Answer 1

這很明顯，但是bs.reload("*.html"); 必須從觀察者的on事件中調用。 換句話說，只要有文件更改，就調用bs.reload("*.html"); 。

由於我使用凝視來監視文件更改，因此我最終這樣做：

    gaze(PLI.SRC_MAIN_CSS, (err, watcher) => {

        if (err) {
            log('error', 'Error buliding src/main/css/ content.');
            throw new Error(err);
        }

        /**
         * Triggered both when new files are added and when files are changed.
         */
        watcher.on('changed', function (filepath) {
            buildMainCSS();
            bs.reload("*.html");                
        });
    });