browser-sync

引入

• 大家写网页的时候，肯定都遇到这种情况，每次用sublime写完都要返回浏览器，刷新页面，而这个工具正好解决了这个问题，提高前端开发效率，这是一个npm的包 browser-sync

browser-sync的基本使用

• 作用：文件保存一下，就会自动监视文件变化，自动刷新浏览器
• 打开cmd,输入以下命令

全局安装：npm install -g browser-sync        //-g是全局安装

• 注意：安装完之后，一定要切换到你要监视的项目下执行下面的代码

　browser-sync start --server --files "*.html”      //执行完这句之后，会自动帮你打开浏览器http://localhost:3000

• 解释一下 start表示启动 --server表示已经启动的http服务 --files后面是你要监视的文件名，*.html表示你要监视这个项目下的所有后缀为.html的文件

• 若是你想监视指定文件，就直接写文名就好,例如：browser-sync start --server --files "index.html ,就是把*改成具体的

browser-sync的深入使用

browser-sync的能力不仅仅如此，实现了无刷新。

• 能够做兼容性测试：对不同的浏览器，它能够同步操作，当你想要测兼容性的时候，你把所有浏览器都打开，放在不同的屏幕上，然后操作一个就可以啦
• 这个browser-sync还有一个更实用的功能对于移动端的开发：
  • 在命令行弹出的地址，有两个端口号，除了这个http://localhost:3000,还有一个http://localhost:3001
  • 访问一下http://localhost:3001，就会出现一个界面，这是一个管理的后台，点击左侧边栏的sync options，里面的选项是可以选择的，举个例子:如果你把Scroll的按钮关掉。那么这各个浏览器之间就不会同步了
  • 可以做移送端的调试，移动端有什么弊端呢，我们右键检查元素，可以看dom元素，也可以看控制台的输出，
    • 但是移动端的能这么看吗？答案肯定是不能，虽然谷歌有手机的模拟器，可以这么看，但是在真实开发中，肯定要用真机去测试，在你测试的时候，可能会出现这样的问题，这个在电脑上测试的ok,但是在手机上怎么不行了呢，这就是兼容器问题，那么，想知道特别是调样式的时候，就想知道是哪些属性不可以
    • 所以这里有一款工具Remote Debug,然后点击第一项Remote Debugger (weinre),点击下面的字，就会跳转到另一个页面。里面就跟浏览器里面差不多，有elements,console等，你就可以在里面查看啦