browsersync 是一個非常強大，方便的工具，可以讓網站開發更加高效。基本上你可以用它來實現你的需求，只要你需要一個讓你能夠在瀏覽器上看到一些比較酷的效果，例如： 你可以在不刷新頁面的情況下，實時的讓你的 CSS 樣式更新。你可以讓所有瀏覽器都聚集成一個工作區，每一次你做的更改都會被其他瀏覽器所看到。你可以讓其中一個瀏覽器充當為 master，你在該瀏覽器的操作將會同時影響所有其他瀏覽器。 browsersync 在 Webpack / Gulp / Grunt 等支持其作為開發服務器的構建工具中都有提供。 在網絡開發中, 常見的情況就是當你修改了一個文件并保存的時候, 網站就會刷新。在使用 browsersync 的情況下，如果在網站中更改一個 PHP 文件并保存并不會自動刷新頁面。 要監測 PHP 更改刷新頁面，首先在gulpfile.js中引入依賴

const browserSync = require('browser-sync').create()
const reload = browserSync.reload

接著在你的 Gulp 任務中添加 watch 任務并設置特定的 globs，用以監測 PHP 文件更新。我們可以使用 `gulp.watch` 來監聽文件更改。其中我們需要使用特殊的 glob `**/*.php` 來表示所有的 `.php` 文件，這樣當任意的 PHP 文件發生改變時，瀏覽器都可以自動刷新。

gulp.task('serve', function () {
browserSync.init({
server: {
baseDir: './'
}
})
watch('**/*.php', { events: ['change'] }, function (cb) {
browserSync.reload()
cb()
})
})

這樣, 當我們在編輯 PHP 文件的時候, 只要在保存后, browsersync 便會自動的刷新頁面。 以上是在使用 gulp 進行 browsersync 協同的情況，當然適用于使用 webpack 或是 grunt 的情況下亦可動用類似的方法在 php 中實現自動刷新。