◆ 场景需求

本人基于wordpress开发网站，为方便本地调试，利用BrowserSync实现编辑 PHP 代码保存后，自动触发刷新浏览器页面，实时呈现代码修改效果。

♦  配置BrowserSync

BrowserSync 是基于 Node.js 的工具，它不仅能在文件（html、css、php、JavaScript等）更改时自动刷新浏览器，还能实现多设备间的同步操作，方便响应式网页设计。

◆npm全局安装

npm全局安装

npm install -g browser-sync

下图是安装成功后BrowserSync 工具所在位置。

◆npm全局环境变量配置

因为后续配置wordpress自动刷新功能就需要在wordpress项目【根目录】下进行启动BrowserSync工具脚本。所以需要进行npm全局环境变量配置，实现在任意目录可以启用BrowserSync工具。

如果不确定npm全局目录，则通过以下命令验证：

npm config get prefix

如上图，就是本人npm【 全局 bin 目录】。

win系统环境变量配置如下：

注意：【 %NODE_GLOBAL_PATH%\ 】其中符号【\】千万别【漏掉】了。

◆wordpress根目录下配置BrowserSync工具js文件

在wordpress根目录下创建js文件（js名字随意），以配置BrowserSync工具。js代码如下：

在wordpress根目录下创建js文件（js名字随意），以配置BrowserSyncmodule.exports = {
    // 代理到本地WordPress站点的URL
    proxy: "http://localhost/", 
    files: [
        // 监控主题目录下的PHP文件
        "wp-content/themes/xshen/**/*.php", 
        // 监控主题目录下的CSS文件
        "wp-content/themes/xshen/**/*.css", 
        // 监控主题目录下的JavaScript文件
        "wp-content/themes/xshen/**/*.js" 
    ],
    ignore: [
        // 忽略缓存目录
        "wp-content/cache", 
        // 忽略备份目录
        "wp-content/backups" 
    ],
    reloadDelay: 100, // 刷新延迟时间，可根据需要调整
    notify: false // 关闭BrowserSync的通知弹窗
};

◆启动BrowserSync工具

进入wordpress根目录启动js文件，【npm全局命令】如下：

C:\wamp64\www\html>browser-sync start --config bs-config.js

在wordpress根目录启动js文件，成功如下图：

◆同步刷新演示

演示一：编辑css文件代码并保持，触发浏览器实时刷新。如下图：

演示二：编辑wordpress中php代码并保存，触发浏览器实时刷新。如下图：