珍爱生命，远离F5之browser-sync+gulp学习

一：自我反省

对于一个有思想有认知的前端来说，重复的东西做多了就觉得很蛋疼。



比如说，打开一个简单的demo页面，我们在上面写码，ctrl+s，然后到浏览器F5,写码，ctrl+s，F5...循环往复，天昏地暗。

还是那句话，重复的过程做多了，就有点蛋疼。无奈，我居然蛋疼了这么久。。。

二：完美设想

想想一个场景：我开着两个显示器，（这里不得不吐槽一句，公司的小破电脑，劳资用够了。），一边是IDE里的代码，另一边是浏览器里的你正在开发的应用。此时桌上还放着你的手机，手机里也是这个开发中的应用。然后，你新写了一小段代码，按下了

ctrl

+

s

保存。紧接着，你的手机和另一个显示器里的应用，就变成了更新后的效果。你可以马上检查效果是否和你预想的一致，甚至都不需要动一下鼠标...

这是懒人必备的一个场景，其实仔细一想，懒人在享受自己成果之前几乎要做大量的事前工作，所以要成为一个懒人也要付出大量的劳动。

三：工作流程

一个优秀的前端必然时时刻刻都在不断的思考与总结，如何让开发效率更高？如何让团队工作效率最大化？如何让整个开发流程更加的快捷，省去不必要的操作，精力集中在写码上。

对于我而言，我理想中的工作流是，

模块化

代码自动编译（less/sass编译css,jade编译html）

自动化测试

多终端同步测试-自动刷新

资源整合，压缩，合并，定位

项目打包

部署

运用gulp，我们可以设置实时监听的是less/sass的实时编译，jade的实时编译，jshint的实时检查，

等到开发过程结束后，再对开发的内容进行文件合并，压缩，打包，部署。

这样，不浪费开发过程的资源。

四：主角登场

browser-sync，这次要说的就是这个工具，

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

Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。您可以想象一下：“假设您的桌子上有pc、ipad、iphone、android等设备，同时打开了您需要调试的页面，当您使用browsersync后，您的任何一次代码保存，以上的设备都会同时显示您的改动”。无论您是前端还是后端工程师，使用它将提高您30%的工作效率。

如果发生变化的文件是css，BrowserSync不会刷新整页，而是直接重新请求这个css文件，并更新到当前页中

五：安装与使用

配合gulp使用

首先在gulpfile.js中引入browser-sync插件。



然后配置一下browser-sync任务





这样，因为我们选择监听自动刷新的是css,js,html，所以通过less/sass编译的过程，可能会对css的实时有个延迟。这个延迟大约1秒，还可以接受。