Linux三秒启动BrowserSync，手机电脑CSS同步飞！

BrowserSync可实现跨设备实时预览，先安装Node.js并全局安装BrowserSync，进入项目目录后运行本地服务器并监听CSS文件，确保手机与电脑在同一局域网并通过IP访问，扩展文件监听路径支持子目录及多类型文件，或使用代理模式集成现有服务器。

如果您希望在开发网页时实现实时预览，尤其是在多个设备间同步CSS样式修改，BrowserSync是一个高效的工具。它能监听文件变化并自动刷新浏览器，让手机和电脑上的页面保持同步。以下是快速启动BrowserSync并实现跨设备同步的步骤：

本文运行环境：MacBook Pro，macOS Sonoma

一、安装Node.js与BrowserSync

BrowserSync基于Node.js运行，因此需要先确保系统已安装Node.js环境。通过npm包管理器可以全局安装BrowserSync，使其在任意项目目录中可用。

1、打开终端，输入命令 node -v 检查Node.js是否已安装。

立即学习“前端免费学习笔记（深入）”；

2、若未安装，请访问Node.js官网下载并安装最新版本。

3、执行命令 npm install -g browser-sync 全局安装BrowserSync。

二、启动本地服务器并启用监听

在目标项目目录中启动BrowserSync，它将创建一个本地开发服务器，并监听指定文件的变化，一旦检测到CSS文件更新，立即推送更新到所有连接设备。

1、在终端中进入您的网页项目根目录，例如 cd /Users/name/my-website。

2、运行命令 browser-sync start --server --files "*.css" 启动服务。

3、默认情况下，BrowserSync会在端口3000启动，访问 http://localhost:3000 即可查看页面。

三、连接手机与电脑在同一局域网

要使手机浏览器同步显示更新，必须确保手机与运行BrowserSync的电脑处于同一Wi-Fi网络下，这样才能通过局域网IP地址访问开发服务器。

飞桨PaddlePaddle

飞桨PaddlePaddle开发者社区与布道，与社区共同进步

12

查看详情

1、在终端中输入 ifconfig 查找本机IP地址（通常为en0或en1下的inet值）。

2、在手机浏览器中输入电脑IP加端口号，如 http://192.168.1.100:3000。

3、加载成功后，手机页面将与电脑同步，任何CSS更改都会实时反映。

四、配置文件监听范围

默认只监听根目录下的CSS文件，若项目结构复杂或需监听子目录中的样式表，应扩展文件匹配路径以确保所有相关文件被监控。

1、修改启动命令为 browser-sync start --server --files "**/*.css"，双星号表示递归监听所有子目录。

2、若还需监听HTML文件变化，可添加为 --files "**/*.html, **/*.css"。

3、保存后重启BrowserSync，即可实现多类型文件的联动刷新。

五、使用代理模式集成现有服务器

当项目已运行在本地服务器（如Apache或Nginx）上时，BrowserSync可通过代理方式注入脚本，实现同步功能而不影响原有服务架构。

1、确定当前服务器地址，例如 http://localhost:8080。

2、运行命令 browser-sync start --proxy "localhost:8080" --files "**/*.css"。

3、BrowserSync将在 http://localhost:3000 提供代理访问入口，同时启用文件监听与自动刷新。

以上就是Linux三秒启动BrowserSync，手机电脑CSS同步飞！的详细内容，更多请关注php中文网其它相关文章！