BrowserSync的安装和使用

BrowserSync真是前端必备神器,浏览器同步工具。简单来说就是当你保存文件的同时浏览器自动刷新网页,省去了手动的环节,大大的节省了开发时间,这个工具是基于nodejs的,可以通过npm安装,不在啰嗦

安装Node后,通过npm安装BrowserSync:

npm install -g browser-sync
然后,就可以开始使用了。打开控制台进入项目所在的目录,然后输入像这样的命令:

browser-sync start --server --files “css/.css"
这个命令用于纯静态站点,也就是仅一些.html文件的情况。后面的–files "css/
.css”,是指监听css目录中的后缀名为.css的文件。请注意这个命令里的start --server,这其实是BrowserSync自己启动了一个小型服务器。

如果是动态站点,则使用代理模式。例如PHP站点,已经建立了一个本地服务器如http://localhost:8080,此时会是这样的命令:

browser-sync start --proxy “localhost:8080” --files “css/*.css”
BrowserSync会提供一个新地址(如未被占用的话,http://localhost:3000)用于访问。

如果简单只是想要监听整个项目,可以写成这样:

browser-sync start --server --files “**”
在控制台里尝试只输入:

browser-sync
你会看到BrowserSync完整的控制台命令指南。其中可以看到有这个命令:

browser-sync init
运行它,将在当前目录生成一个配置文件bs-config.js。

参照官方文档修改这个文件,然后运行

browser-sync start --config bs-config .js
就将以bs-config.js的完整配置信息运行BrowserSync
下面是我运行时临时截了一张图

3001端口是后台地址,里面可自己开启和关闭一些功能,想要终止当前目录,用ctrl+c命令打断即可,清空用cls命令
另外也可以通过gulp使用这个工具,Gulp是现在流行的自动化工具,但BrowserSync并没有Gulp插件版,因为并不需要。
BrowserSync有自己独立的API,将它注册为gulp的一个task即可,送上官方的传送门

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值