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等，你就能够在里面查看啦