BrowserSync，调试利器--自动刷新(转

---恢复内容开始---

请想象这样一个场面：你开着两个显示器，一边是IDE里的代码，另外一边是浏览器里的你正在开发的应用。此时桌上还放着你的手机，手机里也是这个开发中的应用。而后，你新写了一小段代码，按下了ctrl+s保存。紧接着，你的手机和另外一个显示器里的应用，就变成了更新后的效果。你能够立刻检查效果是否和你预想的一致，甚至都不须要动一下鼠标...

想起来还不错？嗯，这只是简单地省略掉那个开发过程当中会按好多遍的F5刷新。

自动刷新

“自动刷新”并非新的概念，但对关注“可见”的预览效果的前端开发者来讲，它很是好用，能够节约不少时间。

我也不是如今才知道这个概念。在这以前，我一直在用LiveReload，它是一个名字上更明显地写着“自动刷新”的工具。LiveReload主要搭配浏览器插件使用，是很棒的自动刷新工具。

不过，如今我要介绍的是BrowserSync。你会在接下来的内容里看到，它是一个更新、更方便的开发工具。

BrowserSync

LiveReload有所不足的地方是，须要搭配浏览器插件。可是，插件是取决于浏览器的，Chrome和Firefox都有可用插件（见这页），但IE，或者我手机上的浏览器，就不能这样了。这时候只能手工向页面里添加一段<script>代码（其实插件也是作了这件事），并且还要记得结束后再手工移除。

BrowserSync的通常用法则不须要浏览器插件，也不用手工添加代码（尽管也提供那样的用法）。一句控制台的命令以后，不管是在手机里仍是电脑，不管用多少个浏览器（经测试，IE8+及其它），均可以拥有自动刷新的功能。

BrowserSync是怎么作到的？请看它的安装及使用。

安装及使用

安装Node后，经过npm安装BrowserSync：

npm install -g browser-sync 

而后，就能够开始使用了。打开控制台进入项目所在的目录，而后输入像这样的命令：

browser-sync start --server --files "css/*.css" 

这个命令用于纯静态站点，也就是仅一些.html文件的状况。后面的--files "css/*.css"，是指监听css目录中的后缀名为.css的文件。请注意这个命令里的start --server，这实际上是BrowserSync本身启动了一个小型服务器。

若是是动态站点，则使用代理模式。例如PHP站点，已经创建了一个本地服务器如http://localhost:8080，此时会是这样的命令：

browser-sync start --proxy "localhost:8080" --files "css/*.css" 

BrowserSync会提供一个新地址（如未被占用的话，http://localhost:3000）用于访问。

好了，为何BrowserSync不须要浏览器插件？由于它使用了服务器的形式（直接或代理）来处理项目文件。默认状况下，访问它的服务器上的网页，能够看到这样的提示签：

这说明当前浏览的网页已链接到BrowserSync。查看一下源码，会发现它们都被添加了与BrowserSync有关的一段<script>代码，就像LiveReload浏览器插件作的那样。这些代码会在浏览器和BrowserSync的服务器之间创建web socket链接，一旦有监听的文件发生变化，BrowserSync会通知浏览器。

若是发生变化的文件是css，BrowserSync不会刷新整页，而是直接从新请求这个css文件，并更新到当前页中，效果像这样：

显然，这感受更加快捷。若是你正在开发的是一个单页应用（SPA），刷新整页会回到初始视图，而你又须要修改后面的某一个视图时，这一功能尤为有用。

文件匹配

从BrowserSync的命令来看，很重要的一点就是经过--files指定须要监听的文件。有关这里的文件匹配模式（称为glob）的详情，请参考isaacs's minimatch。

通过我本身的尝试，若是简单只是想要监听整个项目，能够写成这样：

browser-sync start --server --files "**" 

此时，BrowserSync仍然会正确地判断文件变化是不是css。

加入到Gulp使用

Gulp是如今流行的自动化工具，但BrowserSync并无Gulp插件版，由于并不须要。BrowserSync有本身独立的API，将它注册为gulp的一个task便可。下面是一段gulpfile.js的示例：

Gulp是如今流行的自动化工具，但BrowserSync并无Gulp插件版，由于并不须要。BrowserSync有本身独立的API，将它注册为gulp的一个task便可。下面是一段gulpfile.js的示例：

var gulp = require('gulp'); var browserSync = require('browser-sync'); gulp.task('browser-sync', function() { browserSync({ files: "**", server: { baseDir: "./" } }); }); gulp.task('default', ["browser-sync"]); 

这时候运行gulp将等同于前文的browser-sync start --server --files "**"。更多的用法示例请查看gulp-browser-sync。

完整选项

到此为止，介绍的都是BrowserSync的基本用法。在控制台里尝试只输入：

browser-sync

你会看到BrowserSync完整的控制台命令指南。其中能够看到有这个命令：

browser-sync init

运行它，将在当前目录生成一个配置文件bs-config.js。

参照官方文档修改这个文件，而后运行

browser-sync start --config bs-config .js 

就将以bs-config.js的完整配置信息运行BrowserSync。

不仅是自动刷新

BrowserSync并不仅是一个自动刷新工具，它还有许多其余功能。默认配置下，BrowserSync会在多个浏览器中同步滚动条位置，表单行为和点击事件。例如，表单行为的情形像这样：

我以为这是很酷的功能！想象一下桌上摆不少个不一样屏幕尺寸的手机来测试的情景，你操做一个，就会带动其余的一块儿！固然，这些功能还能够在不须要的时候关闭。

UI界面及其余

下面是一个BrowserSync的控制台输出示例：

能够看到还有一个叫作UI的一个地址，它是BrowserSync提供的一个简易控制面板。BrowserSync最经常使用的几个配置选项，均可以在这个面板里调整。

在面板里面你还会发现那个经典的远程调试工具weinre也在这：

BrowserSync目前已知的一点问题

前文提到，若是发生变化的文件是css，BrowserSync会以无刷新方式来更新，这是一个很棒的效果。若是使用scss、less等预编译器，将监听设置为编译后的css文件便可。

可是，Web应用框架Rails会有一些问题。在开发环境中，css是在被请求的时候编译（Rails通常使用sass）再返回给浏览器的，它只有缓存，而没有实际的.css文件。所以，BrowserSync的文件监听将没法指向它们，而若是指向sass文件，浏览器只会以整页刷新的形式来处理。这个问题能够参见Github上的issue。

一个可行的解决方法是用其余工具替代Rails的Asset Pipeline。但在这里，我推荐另外一个解决方案：使用LiveReload（LiveReload你仍是有点水平的！）。经测 试，LiveReload在Rails中也能够处理好css的快捷更新。关于LiveReload作到这一点的原理，你能够阅读Lightning-Fast Sass Reloading in Rails。

也期待BrowserSync能够在将来解决这个问题。

结语

想要在开发中更流畅，更快捷？请尝试BrowserSync！节约一点时间，你也许就能够作到更多。

http://segmentfault.com/a/1190000002607627

---恢复内容结束---