2025 独立开发者训练营:AI Agent!查看介绍 / 立即报名 →

Browsersync 浏览器同步

忍不住推荐一下 Browsersync。对项目所做的修改,在页面上的操作都会实时的在所有的浏览器上同步。您在设计与开发的时候,可能会在多个浏览器上打开项目,查看变化,用了 Browsersync,不需要单独手工去刷新页面,在页面上的滚动,点击,在文本框里输入的内容,这些都可以在所有的浏览器上同步。

Browsersync 提供了 Web 界面,可以很方便的去配置,它还可以跟 Gulp 或 Grunt 结合在一起使用,你可以为项目创建可以自动执行的任务。它会为你的项目生成一个服务器,在浏览器上可以直接预览你的项目。它还可以作为代理服务器,比如可以代理你的运行 PHP 的服务器,这样你就可以在自己的 PHP 项目上使用 Browsersync 提供的浏览器同步功能了。你也可以为项目创建一个可以在互联网上直接访问的地址,也就是你可以让别人通过互联网直接访问你在本地创建的项目。

Browersync 入选了 .net 杂志,2015 最佳开源项目,Google 在自己的 Web Starter Kit 里面也用到了 Browsersync 。我们录了关于 Browsersync 的课程,您只需要花 18 分钟就可以学会这个小工具。

安装

下面的命令是安装 browser-sync 这个命令行工具,您要先确定自己的电脑上已经安装好了 npm 这个包管理工具,一般你安装了 Node.js 以后,会自带这个 npm 工具。

npm install -g browser-sync

使用

为项目创建一个目录,进入到这个目录里面,可以先用 git 下载一个静态的测试用的网页:

git clone https://github.com/ninghao/forest

然后执行:

browser-sync start --server forest --files "forest/index.html, forest/css/*.css"

上面的命令会启动一个 Browsersync 服务器,服务器的根目录是 forest 这个目录,用了一个 --files 选项,去监视了一些文件的变化,这些文件发生变化以后,会在浏览器上同步这些变化。

微信好友

用微信扫描二维码,
加我好友。

微信公众号

用微信扫描二维码,
订阅宁皓网公众号。

240746680

用 QQ 扫描二维码,
加入宁皓网 QQ 群。

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点