省时的浏览器同步测试工具--Browsersync，释放你的f5

省时的浏览器同步测试工具--Browsersync，释放你的f5

---

功能展示

修改代码后按ctrl + s 保存后，页面实时同步刷新，免去了按f5的时间

打开滚动同步的功能后，滑动当前的页面，其他浏览器的同一个页面、其他设备的同一个页面同时滚动。

对前端开发同学来说非常友好哦

---

特点

• 【热加载】让浏览器实时、快速响应文件的更改，任何一次代码保存，PC、平板、手机等设备都会同时显示改动，使用它将提高您30%的工作效率（热加载）
• 【页面同步】在一个浏览器中滚动页面、点击等行为也会同步到其他浏览器和设备中，这一切还可以通过可视化界面来控制。
• 【兼容性】不需要安装浏览器插件即可使用

使用范围

• 移动端、PC端等多段设备都可兼容。
• 浏览器直接访问ip+端口即可。

区别（为什么用它）

• 与liveReload的区别

  • LiveReload需要搭配浏览器插件。插件是取决于浏览器的，Chrome和Firefox都有可用插件，但IE，或者手机上的浏览器，就不能正常使用了，而BrowserSync的一般用法则不需要浏览器插件所以所有平台都可以使用。

• 与 vue 的热加载的区别

  • vue的热加载功能是搭建在vue-cli脚手架上的，而BrowserSync不需要搭建任何框架，能更快速的使用。

总的来说，BrowserSync可以无视浏览器、无视设备、无视框架快速使用

原理

• Browsersync的工作原理是在标签之后插入初始请求的 ()异步脚本标记， 为了能够正常工作标签必须存在。

安装

• 安装 Node.js

  • BrowserSync是基于Node.js的, 是一个Node模块。

• 安装 BrowserSync

  • 全局使用
    npm install -g browser-sync
  • 结合gulpjs等构建工具使用

---

使用（browserSync初体验）

启动 BrowserSync

• 正常使用(静态项目使用browsersync)

  • 在项目目录下打开命令窗口（目录名不能为中文名）

  • 在命令窗口处输入代码（输入命令后 BrowserSync 将启动一个小型服务器，并提供一个URL来查看您的网站。）

    // 监听css文件
    browser-sync start --server --files "css/*.css"
    
    // 监听css和html文件（如果需要监听多个类型的文件，只需要用逗号隔开）
    browser-sync start --server --files "**/*.css, **/*.html,**/*.js"

• 使用代理模式（动态项目使用browsersync,有其他本地服务器环境情况下）

  • BrowserSync通过代理URL(localhost:3000)来查看网站

    // 主机名可以是ip或域名
    browser-sync start --proxy "主机名" "css/*.css"

• 结合配置文件使用

  • 在控制台/命令窗里输入 browser-sync init，就会在当前目录生成一个配置文件bs-config.js
  • 修改好配置文件后在控制台里输入 browser-sync start --config bs-config .js 就将以bs-config.js的完整配置信息运行BrowserSync。

  • 常用配置

    • files

      //单个文件
      browserSync({
          files: "app/css/style.css"
      });
      
      //多个文件
      browserSync({
          files: ["app/css/style.css", "app/js/*.js"]
      });
      
      //格式 + 1 自定义回调
      // 2.6.0自
      browserSync({
          files: [
              "wp-content/themes/**/*.css",
              {
                  match: ["wp-content/themes/**/*.php"],
                  fn:    function (event, file) {
                      /** Custom event handler **/
                  }
              }
          ]
      });

    • server 使用内置的静态服务器创建基本的HTML / JS / CSS的网站。

      //从应用程序目录中的文件即成
      server: {
          baseDir: "app"
      }
      
      //从与目录列表的应用程序目录中的文件即成
      server: {
          baseDir: "app",
          directory: true
      }
      
      //多个基目录
      server: {
          baseDir: ["app", "dist"]
      }
      
      //从应用程序目录中提供文件，指定特定文件名为索引
      server: {
          baseDir: "app",
          index: "index.htm"
      }
      
      //由于1.2.1版本
      //关键是URL匹配
      //值是文件夹要提供的（相对于当前的工作目录）
      server: {
          baseDir: "app",
          routes: {
              "/bower_components": "bower_components"
          }
      }
      
      //自定义中间件
      server: {
          baseDir: "./",
          middleware: function (req, res, next) {
              console.log("Hi from middleware");
              next();
          }
      }
      
      //多个自定义中间件
      server: {
          baseDir: "./",
          middleware: [
              function (req, res, next) {
                  console.log("Hi from first middleware");
                  next();
              },
              function (req, res, next) {
                  console.log("Hi from the second middleware");
                  next();
              }
          ]
      }

    • port 指定端口号

      //使用（而不是一个自动检测到Browsersync）特定端口
      port: 8080

    • https 启用HTTPS本地主机。 注意 - 这是没有必要的代理选项，因为它会从你的目标URL推断。

      //启用HTTPS静态文件服务器
      browserSync({
          server: "./app",
          https: true
      });
      
      //启用HTTPS的片段模式
      browserSync({
          https: true
      });

    • ghostMode 点击，滚动和表单在任何设备上输入将被镜像到所有设备里（当然你必须正确使用了Url）

      //在这里你可以禁用/启用 每个单独的功能
      ghostMode: {
          clicks: true,
          forms: true,
          scroll: false
      }
      
      //或使它们全部关闭，一气呵成
      ghostMode: false

    • open 决定Browsersync启动时自动打开的网址。默认为“本地”，如果没有设置

      //停止自动打开浏览器
      open: false
      
      //打开本地主机URL
      open: "local"
      
      //打开外部URL -必须在网上
      open: "external"
      
      //打开用户界面-自从2.0.0
      open: "ui"
      
      //打开隧道网址-还必须设置`tunnel`选项
      open: "tunnel"

    • browser 指定浏览器打开

      //在Chrome浏览器中打开网站
      browser: "google chrome"
      
      // 在chrome、firefix下打开该站点
      browser: ["google chrome", "firefox"]

    • startPath 指定起始路径，打开浏览器

      // URL处打开一个浏览器窗口+“/info.php”
      startPath: "/info.php"

  • 更多配置信息请到官网查看：http://www.browsersync.cn/doc...

browserSyn常用命令行

• browserSync命令行方法

  • 命令行常用方法：browser-sync start

    --server    运行本地服务器（使用您的CWD作为Web根）（类似于anywhere启动服务）
    --files        监测的文件路径 ("**/*.css, **/*.html,**/*.js")
    --startPath    指定起始路径，打开浏览器
    --open    选择哪个URL是自动打开（本地，外部或隧道）
    --https        用https协议打开
    --port        指定要使用的端口
    --url        提供完整的URL运行Browsersync实例
    --ui-port    指定端口的UI使用
    --no-ui        不要启动用户界面
    --no-open    不要打开一个新的浏览器窗口
    --config    指定为BS-config.js文件的路径
    reload    重载
        --files    文件路径重载
        --port    通过目标端口号的运行实例
        --url    提供完整的URL运行Browsersync实例

• 更多命令请到官网查看：http://www.browsersync.cn/doc...

---

其他

• UI界面

  • 控制台启动browserSync后，通过控制台给出的地址进入ui界面，它是BrowserSync提供的一个简易控制面板。
• 如果发生变化的文件是css，BrowserSync会以无刷新方式来更新。如果使用scss、less等预编译器，将监听设置为编译后的css文件即可。

参考地址

• http://www.browsersync.cn/
• https://segmentfault.com/a/11...
• http://www.baidu.com

最后

本文章仅提供简单的使用教程，如需跟深层次的学习，请到官网或者找寻其他资料来学习。