ustwo/browser-sync

Docker镜像：ustwo/browser-sync

镜像概述

本镜像封装BrowserSync工具，将其命令行界面（CLI）作为ENTRYPOINT，可直接替代原生BrowserSync CLI使用。适用于Docker 1.9及以上版本，已在Docker for Mac和OSX的Docker Machine环境中测试通过。

核心功能

• 无缝替代BrowserSync原生CLI，支持所有命令参数
• 提供静态网站服务，实时监控文件变化并同步刷新浏览器
• 支持代理动态网站，与后端服务容器联动
• 允许通过配置文件自定义同步规则
• 兼容Docker Compose及自定义网络配置

使用场景

• 静态网站开发：实时预览CSS/HTML文件修改效果
• 动态网站开发：代理后端服务，监控前端资源变化并同步更新
• 团队协作：统一开发环境，避免本地依赖差异

配置说明

静态网站部署

挂载本地项目目录，暴露服务端口（3000）和控制端口（3001）：

sh
docker run -dt \
           --name browser-sync \
           -p 3000:3000 \
           -p 3001:3001 \
           -v $(PWD):/source \
           -w /source \
           ustwo/browser-sync \
           start --server --files "css/*.css"

动态网站代理

方式1：容器链接（Link）

先启动后端应用，再链接到BrowserSync：

sh
# 启动后端应用容器
docker run -dt --name myapp -p 8000:8000 myimage

# 启动BrowserSync并链接到myapp
docker run -dt \
           --name browser-sync \
           --link myapp \
           -p 3000:3000 \
           -p 3001:3001 \
           ustwo/browser-sync \
           start --proxy "myapp:8000" --files "css/*.css"

方式2：自定义网络

创建网络后无顺序启动容器：

sh
# 创建自定义网络
docker network create bs

# 启动后端应用（加入网络）
docker run -dt --name myapp --net bs myimage

# 启动BrowserSync（加入网络）
docker run -dt \
           --name browser-sync \
           --net bs \
           -p 3000:3000 \
           -p 3001:3001 \
           ustwo/browser-sync \
           start --proxy "myapp:8000" --files "css/*.css"

配置文件使用

挂载本地配置文件并指定：

sh
docker run -dt \
           --name browser-sync \
           --net bs \
           -p 3000:3000 \
           -p 3001:3001 \
           -v $(PWD)/config.js:/source/config.js \
           ustwo/browser-sync \
           start --config config.js

Docker Compose支持

参考项目中的docker-compose.yml示例配置。

OSX下Docker Machine注意事项

Virtualbox环境下文件系统事件支持有限，需使用轮询策略（如sandbox/polling.js示例）。

联系与许可

• 联系***：***
• 维护者：Arnau Siches (@arnau)
• 许可证：MIT（无主动维护保证）