Linux Ubuntu用BrowserSync同步HTML与CSS多设备

首先安装Node.js和npm,再全局安装BrowserSync,进入项目目录启动服务器并监听HTML与CSS文件,通过局域网IP在多设备访问,修改代码后页面自动同步刷新,支持CSS热替换,需确保设备同Wi-Fi且端口开放。

要在Linux Ubuntu系统中使用BrowserSync实现HTML与CSS文件在多设备间的实时同步,关键是通过本地网络将多个设备(如手机、平板、电脑)连接到同一个开发服务器,并自动刷新页面以反映代码更改。

安装Node.js与npm

BrowserSync基于Node.js,需先安装Node.js和包管理器npm

  • 打开终端并运行:sudo apt update
  • 安装Node.js:sudo apt install nodejs npm
  • 验证安装:node -vnpm -v

全局安装BrowserSync

使用npm安装BrowserSync命令行工具:

  • 运行:sudo npm install -g browser-sync
  • 检查是否成功:browser-sync --version

启动BrowserSync服务

进入你的项目目录,启动静态服务器并启用同步功能:

  • 进入项目路径,例如:cd /home/yourname/my-website
  • 运行命令: browser-sync start --server --files "*.html, *.css"
  • 终端会显示本地URL(如 http://localhost:3000)和外部URL(如 http://192.168.x.x:3000),后者可用于局域网内其他设备访问

多设备同步操作

确保所有设备在同一Wi-Fi网络下:

  • 在手机或平板浏览器中输入Ubuntu主机的IP加端口号(如 http://192.168.1.100:3000)
  • 修改项目中的HTML或CSS文件并保存,所有连接的设备将自动刷新
  • 支持CSS热替换:仅更新样式不刷新整页

基本上就这些。只要文件监听路径设置正确,且防火墙未阻止3000端口,多设备同步就能稳定运行。适合前端调试响应式布局,提升开发效率。