我最近在准备开发新的 WordPress 的主题的工具，为了方便自己开发主题，正在准备一个脚手架，本文是开发过程中的经验总结。

白宦成

在进行主题开发的时候，一个很好的体验是来自于变更能够实时生效。过去我们想要实现这样的功能需要自己手动刷新浏览器。但随着前端技术的进步，我们可以借助诸如 browser-sync 这样的工具来完成自动的刷新，从而实现无需手动刷新，代码修改后自动刷新。此外，除了 browser-sync, 你还可以选择 webpack-dev-server。

原理分析

此类工具的工作模式是比较简单的，一般而言，会要求你设定一个代理的端口，他会将对应端口的请求进行转发，并在其中加入 BrowserSync 的 JS 文件，从而实现可以无需手动操作来刷新。

而其刷新的能力则是源自于 BrowserSync 本地提供的 WebSocket Server。嵌入的 JS 文件中加入了 WebSocket 的相关链接代码， 从而实现从 Command Line 当中获取刷新指令，前端则在获取到指令后进行刷新。

具体步骤

1. 安装 BrowserSync

首先在项目中引入 browser-sync ，执行如下命令

npm install browser-sync --save-dev

2. 修改启动文件

我是使用 express generator 生成的项目，需要修改 bin/www 文件，如果你是自己建设的项目，则需要自行修改。

在启动文件中找到监听端口的代码， 并在其回调函数中添加如下代码

# 添加前
server.listen(port)
# 添加后
var bs = require('browser-sync').create();
server.listen(port, () => { 
  bs.init({
    open: false,
    ui: false,
    notify: false,
    proxy: 'localhost:' + port,
    files: ['./views/**', './routes/**'],
    port: 8080
  });
});
Code language: PHP (php)

上述配置中，可以根据你的需要修改 proxy 、files、port 等选项，实现自定义配置。

关于配置的更多信息，你可以参考 https://browsersync.io/docs/options

3. 启动服务，并测试

在命令行中执行 npm start ，在浏览器中打开对应的页面，当可以看到内容后，可以修改文件，等待页面的自动刷新，如果成功刷新了，则表示你已经完成了相关能力的配置。