作为一名前端狗，我们的日常工作除了撸出一手新鲜的代码，剩下的时间就是和各式浏览器，各种手机PK（兼容性调试）。接下来就是无休止的Ctrl+S，F5，而且每次都要编辑器浏览器来回切换。据不完全统计，前端每次切换屏幕耗时0.5s，每次点击F5耗时0.5s，平均每天需切换3600次，等于3600s，等于60分，等于1小时，Ctrl，Tab，F5键每天被点击N次（以上数字纯属虾扯蛋）。为了防止键盘被破坏，为了追求极客之速度，为了，，，停。。。此处为广告时间。接下来就为大家介绍一款神器————browsersync。

browsersync是类似于livereload的东东，简单的说就是它可以帮你本地启动一个静态文件服务器，当你改动某个文件，点击Ctrl+S，接下来浏览器能够自动刷新并显示你改动后的效果。这样你就不用点击F5了，有人说这有什么厉害的，只是自动刷新而已，还得切换屏幕，同样是浪费时间。但如果你有外接屏，这时，你会发现，所改及所得，这速度杠杠的。但如果你有两块屏（有钱淫），这时你会发现改完之后两块屏同时刷新了。但如果你有三块屏，或者你有N块屏（想想而已）。N块屏是很少有了，但是有了它，你可以在一块大的显示器上显示IE，Chrome，Firefox等浏览器的窗口。这时你可以看到各个浏览器的显示情况，当你改了文件时，每个浏览器都可以自动刷新。同样对于移动应用来说，你可以将你的页面投射到多个移动终端上。怎么样，这个是不是很酷炫。如果说这个还是不够装13的话，那就要介绍另一个功能，当你用鼠标滚动你的网页时（你的网页长度超过你的浏览器窗口），你会发现，其它的浏览器也会滚动到相应的页面。这，，，牛13。（看到这，大家是不是觉得它可以作为一个遥控？）。除此之外，它还有其他一些炫酷功能会在后续博客更新。

安装

作为前端利器，安装和使用均依赖于nodejs。npm install -g browser-sync全局安装browser-sync。mac用户可能需要加sudo，即sudo npm install -g browser-sync。

安装完成后控制台输入browser-sync -h，可查看该模块是否安装。同时介绍一个小技巧（Linux大神略过），对于命令行来说，加-v一般表示查看版本号，-h表示查看该命令的帮助信息，一般会打印出它所有的参数及其介绍。

使用

比如我创建了一个hello工程，

|—— hello
|   |—— img/
|   |—— css/
|   |—— js/
|   |—— main.html

依次输入如下命令：

1
2
cd hello
browser-sync start --server --files "**/*.*"

这时浏览器会自动打开网页http://localhost:3000，你可以访问hello目录下的main.html等静态文件。当然，这个是最基本的一个实现，接下来我们可以通过添加一系列的参数去实现不同的效果。

输入browser-sync -h，即可显示出下述帮助命令（部分注释中文翻译了下）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
使用:
  ---------

      $ browser-sync <command> [options]

  命令:
  ---------

      init    创建一个config配置文件
      start   开始一个browser-sync应用
      reload  发送一个reload事件给http请求

  `start` Options:
  --------

      --help                   显示帮助信息
      --version                显示版本号
      --browser                选择哪个浏览器自动打开（可输入浏览器应用地址，不加选择默认浏览器打开）
      --files                  监听的文件（可用*代替，**/*.*表示工程下的任一文件）
      --server                 启动一个本地server，（使用browser-sync所在目录作为根目录）
      --index                  指定某个文件作为索引页（比如指定main.html，浏览器打开http://localhost:3000会显示main.html内容，注意和directory参数互斥）
      --extensions             指定文件扩展名回退
      --startPath              指定打开浏览器的开始路径（比如--startPath='come'，浏览器打开就会显示http://localhost:3000/come）
      --https                  启用SSL
      --directory              是否显示当前路径下的目录列表
      --proxy                  代理到一个已存在的server
      --ws                     只在代理模式下 - 允许websocket代理
      --xip                    允许配置一个域到主机后（例如：http://192.168.0.123.xip.io:3000）
      --tunnel                 允许使用一个公共地址（允许后会把本地服务映射到公网地址，可通过公网访问）
      --open                   自动打开时选用哪种URL(参数可选：local, external or tunnel)
      --config                 指定一个bs-config.js配置文件的路径（配置文件名可自选）
      --host                   指定一个host名
      --logLevel               设置打印的log的level (silent, info or debug)
      --port                   指定一个端口（默认会扫描你所有端口，从3000开始）
      --reload-delay           当文件改变时，http应用延时多久（单位：毫秒）reload
      --reload-debounce        限制在浏览器中的频率：刷新事件可以被发射到连接的客户机
      --ui-port                UI界面的端口，默认在port端口上加1（UI界面是browser-sync的控制台）
      --no-notify              禁止在浏览器中通知元素
      --no-open                不要打开一个新的浏览器窗口
      --no-online              强制在离线状态下使用
      --no-ui                  不启动UI界面
      --no-ghost-mode          当在一个设备中滚动时，不镜像到其他设备
      --no-inject-changes      每个文件改变时都触发reload
      --no-reload-on-restart   重启时不在所有浏览器reload

  `reload` Options:
  --------

      --files   reload的文件路径
      --port    端口号为port的实例
      --url     提供完成路径运行browser-sync实例

部分常用参数的示例

监听文件
1
2
3
4
5
6
7
8
单个文件(监听main.js的改动)
browser-sync start --server --files 'js/main.js'

一类文件（监听js目录下所有以js结尾的文件改动）
browser-sync start --server --files 'js/*.js'

多种文件（监听.js，.css，.html文件改动）
browser-sync start --server --files 'js/*.js,css/*.css,*.html'
改变服务器的映射目录
1
2
3
4
5
映射目录为单个目录（只能访问js目录下的文件）
browser-sync start --server js --files '*.js'

映射目录为多个目录（只能访问js和css下的文件）
browser-sync start --server js --server css --files "**/*.*"
显示文件列表
1
2
显示文件列表（显示跟目录下的所有文件列表）
browser-sync start --server --directory true
公网映射
1
2
3
4
5
本地应用映射到公网（映射到公网http://xxx.localtunnel.me）
browser-sync start --server --tunnel

指定特定的二级域名（映射到公网http://hello.localtunnel.me）
browser-sync start --server --tunnel hello
浏览器打开方式
1
2
3
4
5
6
7
8
打开本地链接(浏览器打开时显示：http://localhost:3000)
browser-sync start --server --open local

打开external链接，为内网ip(浏览器打开时显示：http://192.168.xx.xxx:3000)
browser-sync start --server --open local

打开external链接，为公网地址(浏览器打开时显示：http://xxx.localtunnel.me)
browser-sync start --server --tunnel --open tunnel

配置文件

如果嫌弃命令行需输入太多参数，可选择通过读取配置文件的方式

1
browser-sync start --config path/to/config.js

但是参数那么多，我怎么知道怎么配置文件怎么写？不用担心，browser-sync已为你准备好一切

1
2
cd hello
browser-sync init

这时你可以看见hello目录下自动生成一个bs-config.js文件，并生成默认配置内容

|—— hello
|   |—— img/
|   |—— css/
|   |—— js/
|   |—— bs-config.js
|   |—— main.html

bs-config.js内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
/*
 |--------------------------------------------------------------------------
 | Browser-sync config file
 |--------------------------------------------------------------------------
 |
 | For up-to-date information about the options:
 |   http://www.browsersync.io/docs/options/
 |
 | There are more options than you see here, these are just the ones that are
 | set internally. See the website for more info.
 |
 |
 */
module.exports = {
    "ui": {
        "port": 3001,
        "weinre": {
            "port": 8080
        }
    },
    "directory": true,
    "files": ['js','css'],
    "watchOptions": {},
    "server": ['js','css'],
    "proxy": false,
    "port": 3000,
    "middleware": false,
    "serveStatic": [],
    "ghostMode": {
        "clicks": true,
        "scroll": true,
        "forms": {
            "submit": true,
            "inputs": true,
            "toggles": true
        }
    },
    "logLevel": "debug",
    "logPrefix": "BS",
    "logConnections": false,
    "logFileChanges": true,
    "logSnippet": true,
    "rewriteRules": false,
    "open": "local",
    "browser": "default",
    "xip": false,
    "hostnameSuffix": false,
    "reloadOnRestart": false,
    "notify": true,
    "scrollProportionally": true,
    "scrollThrottle": 0,
    "scrollRestoreTechnique": "window.name",
    "scrollElements": [],
    "scrollElementMapping": [],
    "reloadDelay": 0,
    "reloadDebounce": 0,
    "plugins": [],
    "injectChanges": true,
    "startPath": null,
    "minify": true,
    "host": null,
    "codeSync": true,
    "timestamps": true,
    "clientEvents": [
        "scroll",
        "scroll:element",
        "input:text",
        "input:toggles",
        "form:submit",
        "form:reset",
        "click"
    ],
    "socket": {
        "socketIoOptions": {
            "log": true
        },
        "socketIoClientConfig": {
            "reconnectionAttempts": 50
        },
        "path": "/browser-sync/socket.io",
        "clientPath": "/browser-sync",
        "namespace": "/browser-sync",
        "clients": {
            "heartbeatTimeout": 5000
        }
    },
    "tagNames": {
        "less": "link",
        "scss": "link",
        "css": "link",
        "jpg": "img",
        "jpeg": "img",
        "png": "img",
        "svg": "img",
        "gif": "img",
        "js": "script"
    }
};

其中json配置部分可参考命令行参数配置

结语

在web开发中，coding只占开发中的一小步，剩下的更多的是去做兼容性的调试。虽然只节省了一个F5的动作，但对开发速度却是一个质的飞跃。本文只是browsersync的冰山一角，还有更多的惊喜等着你去发现。