當在共享文件更新中使用Jekyll時，只重新加載BrowserSync

我有一個Jekyll站點，它是Gulp項目的一部分，使用BrowserSync預覽站點的建立。我的一個watch語句查找對html的更改，以便自動刷新該站點。當在共享文件更新中使用Jekyll時，只重新加載BrowserSync

gulp.watch('docs/_site/**/*.html').on('change', browserSync.reload);

按設計工作。

然而，當我更新header.html（或任何其他共享文件），刷新瀏覽器多個時間，因爲所有頁面改變。這是有道理的，因爲所有的靜態頁面正在更新。但我想在更新共享文件時防止這種情況發生。

有沒有一種方法可以讓Gulp/BrowserSync只在共享Jekyll文件更新時刷新一次？

UPDATE

我的表設置如下所示：

gulp.task('dev:watch', ['browserSync', 'docs:sass', 'docs:lib', 'docs:build'], function() { 
    gulp.watch(['scss/**/*.scss', 'docs/assets/**/*.scss'], ['dev:sass']); 
    gulp.watch(['docs/**/*.html', 'docs/**/*.md', '!docs/_site/**'], ['docs:build']); 
    gulp.watch('docs/_site/**/*.html').on('change', browserSync.reload); 
});

的docs:build任務：

gulp.task('docs:build', function() { 
    browserSync.notify('Building Jekyll'); 
    return spawn('jekyll', ['build', '--config', '_config.yml,_config_dev.yml', '--incremental'], {stdio: 'inherit'}); 
});

來源

2016-06-28 Evil Closet Monkey

＃編輯你的問題後編輯：

_site中的更改是dev:sass或docs:build任務的結果，因此，您可以從這些任務中調用browserSync.reload。然後你會確定它只附加一次。

＃編輯完

所以，你看觀看過程。

您有一個jekyll serve正在運行，默認情況下它正在監視根目錄中的任何更改，並針對包括「_includes」文件在內的所有文件啓動一代。

對於_include文件更改，您可以在_site文件夾中包含10個頁面+ 10個帖子+ 10個收藏項= 30個刷新頁面，從而導致30個gulp.watch更新被觸發。

你最好看基本傑基爾文件和文件夾與變革：

gulp.watch(
    ['*.html', '*.md', '_includes/*.html', '_layouts/*.html', ...other files], 
    browserSync.reload() 
);

，甚至添加reload delay允許傑基爾需要時間來重新生成一個大工地，並重新加載的下降時間後：

browserSync.reload({reloadDelay: 5000})

來源

2016-06-28 23:59:38

嗨大衛。我沒有運行'jekyll serve'，它只是一個基於Jekyll的網站（我的措辭可能令人困惑）。 Gulp正在處理所有的編譯（通過「構建」過程），並且該站點正在由BrowserSync服務（在開發期間）。 –

以及_site中的更改如何發生？看 - > jekyll構建？我們可以看到你的代碼嗎？ –

我已經用'watch'和'build'任務更新了我的問題。謝謝！ –

當在共享文件更新中使用Jekyll時，只重新加載BrowserSync

回答

相關問題