Browsersync не обновляет обновления при использовании API? - PullRequest
Новая
       9

Browsersync не обновляет обновления при использовании API?

0 голосов
/ 05 мая 2018

Короткая версия вопроса

Изменения в файлах происходят в каталоге target. У меня настроена браузерная синхронизация так: 

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

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

    bs.reload("*.html");

Однако это не обнаружение изменений, которые происходят в подкаталогах target, и обновление браузера. Кажется, что приведенных выше строк недостаточно?

Длинная версия вопроса

Я построил CLI. Он отслеживает изменения CSS в src/main/css и компилирует CSS (используя PostCSS) в target/main/css. То же самое включено для HTML-шаблонов в src/main/html.

Взгляд отслеживает изменения файлов и запускает функции, выполняющие компиляцию, и эта часть работает нормально.

Полный исходный код можно посмотреть здесь .

Я надеялся, что BrowserSync обнаружит изменения файла в каталоге target и обновит браузер, когда будут выполнены изменения, однако я не вижу никаких обновлений. У меня есть такая настройка BrowserSync в команде serve: 

    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/. Отредактируйте HTML в src/test/html/index.html. Изменения компилируются в target/test/html/index.html, и BrowserSync должен получить изменения IIUC ... но это не так ...

Мысли

1 Ответ

0 голосов
/ 06 мая 2018

Это довольно очевидно, но bs.reload("*.html"); должен вызываться из события on наблюдателя. То есть, другими словами, всякий раз, когда происходит изменение файла, bs.reload("*.html");.

Поскольку я использую gaze для наблюдения за изменениями файлов, в итоге я сделал следующее: 

    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");                
        });
    });
...