美文网首页
BrowserSync的安装和使用

BrowserSync的安装和使用

作者: 蘑菇不寂寞 | 来源:发表于2019-04-19 10:47 被阅读0次

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

相关文章

  • BrowserSync的安装和使用

    BrowserSync真是前端必备神器,浏览器同步工具。简单来说就是当你保存文件的同时浏览器自动刷新网页,省去了手...

  • BrowserSync的安装和使用

    安装node后,下载 npm install -g browser-sync 简单使用 代理 默认的端口是3000...

  • browsersync 工具使用

    最近想研究使用 browsersync 工具使用,按网上的安装方法没成功。 报了一个错!

  • 调试工具

    浏览器同步调试工具: BrowserSync 安装(推荐全局安装): 启动BrowserSync 静态网站 如果想...

  • Browsersync 省时的浏览器同步测试工具

    相关链接:Browsersync官网Browsersync中文网 前言:1分钟快速使用 Browsersync 下...

  • gulp 自用总结

    1.Browsersync https://browsersync.io/#install 配合gulp插件使用:...

  • BrowserSync的安装与使用详解

    BrowserSync是一个省时的浏览器同步测试工具,可以同时在PC、平板、手机等设备上进项调试。这个工具是基...

  • Glup

    glup 安装错误解决 +安装Sass 安装服务器 图像最小化插件安装 压缩CSS BrowserSync

  • browserSync gulp 配置 自定义域名访问

    安装 npm install --save-dev browser-sync 引入 var browserSync...

  • browser-sync

    安装 静态网站如果您想要监听.css文件, 您需要使用服务器模式。 BrowserSync 将启动一个小型服务器,...

网友评论

      本文标题:BrowserSync的安装和使用

      本文链接:https://www.haomeiwen.com/subject/euxqgqtx.html