基于nodejs的前端调试工具browser-sync入门

1 - 关于browser-sync

browser-sync是一个基于nodejs的一个插件，用于前端调试，好处是该插件可以同步一个网段内的所有页面，比方说，假如你要做一个响应式的网页的时候，该插件就可以节省非常多的时候，例如，你要调试iPhone5，iphone6，iPhone6s,ipad，三星等设备的分辨率。

1-1

 这里假设有真机和没有真机的情况，假如有真机，我们通过pc端的iis发布一个静态页面，再用真机连接我们主机的ip，这样来调试我们的页面有没有出现异常.
 这样我，我们每保存一次代码，就去真机刷新一次，累都累死啦。。。

1-2

 这里假设我们没有真机，我们用chrome浏览器来模拟手机的分辨率，那么也是累死人的节奏，没保存一遍，到处刷新再看效果，简直是在虐待前端

解决方案就是使用browser-sync

2 - browser-sync的安装

2-1

首先先安装nodejs和npm，至于怎么安装，这里就不展开了。

2-2

然后安装browser-sync，这里使用npm来安装

npm install -g browser-sync

就是这样简单的一句话，前提是nodejs和npm得安装成功

这里的代码是通过dos来使用的，这里的指令是来显示browser-sync的版本的，如图所示

3 - browser-sync的使用

3-1

既然安装好了，那么我们就来使用它，我们可以通过dos的方式来使用它，dos的正确打开方式是win键+R键
同时按上这两个键会弹出一个小窗口，在输入框输入cmd，可以进入dos系统，这里进行一个简单的dos指令学习
cd 指的是要跳转到哪个路径
cd.. 后面加上两个点是跳转上一个路径，至于盘符的跳转就更容易些，" G: ",这个g加上冒号的就可以跳到G盘

那好，假如我们现在有一个项目在G盘的project文件夹，项目的首页是index.html，此外还有css文件夹以及里面的css文件
那我们怎么使用browser-sync呢？

3-2

首先我们得跳到我们的G盘，根据我们前面的学习，在黑压压的dos写上" G: ",回车就跳转到G盘了，
如果我们要查看G盘的文件，可以用命令 "dir" ,另外可以加参数 /w ,这个意思是分列的形式来显示文件，
完整写法 dir/w ,这样就可以看见G盘有什么文件.

那我们现在可以用cd project 这个命令跳转到project文件夹    

3-3

那现在我们已经跳转到project文件夹，开始进入正题

同样是命令 browser-sync start --server --files "css/*.css"

     解释 start  这是必带的一个参数
         --server 运行本地服务器，也就是将你的电脑作为一个服务器，一般是局域网
         --files 就是你运行这条命令的路径的简称，后面的参数就可以不用写那么长
         "css/*.css" 这个参数是和--files命令一起使用的，*是指css文件夹下的所有css文件，也就是对这些文件进行监控，这些文件一旦改变，就刷新页面

    那么这条命令的作用就用于对css文件的监控，以及文件改变的话，就刷新页面

3-4

browser-sync start --server --files "css/*.css,*.html"
这命令增加了*.html，意思是对所有html文件的监控

3-5

browser-sync start --server --files "css/*.css,*.html" --browser "chrome"
这条命令增加了 --browser "chrome",意思是指定对应的浏览器打开文件，这里指定了chrome浏览器

3-6

browser-sync start --server --files "css/*.css,*.html" --index "index.html" 
这条命令增加 --index "index.html"意思是在很多页面中指定index.html页面为起始页

4- 结语

browser-sync的命令不止这些,详情可以看

    http://www.browsersync.cn/docs/command-line/

对了，browser-sync的中文官网是

    http://www.browsersync.cn