前端自动化系列(五)之Browsersync自动刷新

白俊遥
2016-12-11 21:30:17
前端
node.js

没错；这个系列我还没写完；
这真是一个超大写的尴尬；
最近实在太忙了；经常都是1点左右才睡；
以至于博客停更了一个月；
现在终于抽出了点时间来填坑了；
上古时代；我开发的姿势是这样的；
写代码—> ctrl/command+s 保存 —> ctrl/command+tab 切换到浏览器—> F5刷新；
然后如此循环；
如果是调移动端的页面，真机测试；还要离开键盘拿起手机刷新；

于是；为了提高生产力；减少重复操作；
我在找一种方案；让页面自动刷新好了；
比如：

<script>
    // 隔1秒自动刷新一次
    setInterval(function(){
        location.reload();
    },1000)
</script>

再或者使用meta：

<meta http-equiv="refresh" content="1" />

但是这样一直刷也挺烦的；
于是就有了早年推荐的两个软件；
推荐开发工具系列之--LinrF5(自动刷新)
推荐开发工具系列之--PyF5(自动刷新)

它们是在按了 ctrl/comman+s 后来触发浏览器刷新的；
然而很多时候是在写php代码保存时并不需要刷新；
也不能自动刷新移动端浏览器的页面；
这些只是缺陷，倒不致命；
然鹅，经常跨平台开发的时候；
windows、Ubuntu、mac 系统都在用；
就彻底没办法愉快的玩耍了；
直到后来发现了她；
白俊遥博客
我是 browsersync 一个集跨平台完美于一身的 node.js 包；
完美；完美；完美；
我想要的她都有；
相见恨晚；相见恨晚；相见恨晚；
browsersync 更强大的是；改css连页面都不用刷新；直接样式就变了；
而且可以指定监听某些文件；
而且移动端手机浏览器也能自动刷新；
而且可以跨平台运行；
而且可以配合 grunt、gulp 等工具使用；
而且等等；
这么多而且；最重要的是；它还是免费的；
不废话；直接上图了；
白俊遥博客
借browsersync中文网的图；

有了 browsersync 后；如果再配个双屏的显示器；
左边屏幕放编辑器敲代码；右边屏幕放浏览器窗口；
然后 ctrl/command+s 后浏览器就自动刷新了；
这感觉；想想就嗨的敲代码不想停了；
好了；从开发中遇到问题的实际场景；
到使用browsersync后能带来的便利都扯了一通了；
下面到了安装使用的时间；

cnpm install -g browser-sync

然后新建 index.html 和 index.css ；
在index.html 中 link index.css ；
就像我上面录制的第一张动图一样；
在此目录下运行如下命令；

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

运行成功是这个样子的；
白俊遥博客
会自动打开浏览器访问 Access URLs 中的 local ;
我这里是http://localhost:3000/ ;
如果移动端想访问的话；确保和pc是同一网络中；
移动端用浏览器访问 Access URLs 中的 External ；
我这里的是 http://192.168.31.162:3000;