# 为 Express 项目添加文件变更自动刷新

- Link: https://www.ixiqin.com/2022/03/03/add-browser-sync-to-express/
- Published: 2022-03-03T06:00:00+08:00
- Author: 白宦成

文章目录

 [Toggle](https://www.ixiqin.com/2022/03/03/add-browser-sync-to-express/#)

 * [原理分析](https://www.ixiqin.com/2022/03/03/add-browser-sync-to-express/#%e5%8e%9f%e7%90%86%e5%88%86%e6%9e%90)
 * [具体步骤](https://www.ixiqin.com/2022/03/03/add-browser-sync-to-express/#%e5%85%b7%e4%bd%93%e6%ad%a5%e9%aa%a4)
    - [1. 安装 BrowserSync](https://www.ixiqin.com/2022/03/03/add-browser-sync-to-express/#1_%e5%ae%89%e8%a3%85_browsersync)
    - [2. 修改启动文件](https://www.ixiqin.com/2022/03/03/add-browser-sync-to-express/#2_%e4%bf%ae%e6%94%b9%e5%90%af%e5%8a%a8%e6%96%87%e4%bb%b6)
    - [3. 启动服务，并测试](https://www.ixiqin.com/2022/03/03/add-browser-sync-to-express/#3_%e5%90%af%e5%8a%a8%e6%9c%8d%e5%8a%a1%ef%bc%8c%e5%b9%b6%e6%b5%8b%e8%af%95)

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

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

## 原理分析

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

![](https://files.ixiqin.com/2022/02/23071955/d2b5ca33bd970f64a6301fa75ae2eb22-37-
1024x294.png)

browser-sync-client.js

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

![](https://files.ixiqin.com/2022/02/23071955/d2b5ca33bd970f64a6301fa75ae2eb22-36-
1024x233.png)

WebSocket 请求

## 具体步骤

### 1. 安装 BrowserSync

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

    ```shcb-line-numbers
    npm install browser-sync --save-dev
    ```

### 2. 修改启动文件

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

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

    ```php
    # 添加前
    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` ，在浏览器中打开对应的页面，当可以看到内容后，可以修改
文件，等待页面的自动刷新，如果成功刷新了，则表示你已经完成了相关能力的配置。