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

没错;这个系列我还没写完;
这真是一个超大写的尴尬;
最近实在太忙了;经常都是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;

改动css;即可自动刷新;
好奇心比较重的童鞋;会发现下面 UI 和 UI External;
这是用来通过web端修改 browsersync 设置的;
大致是这个样子;

白俊遥博客
有兴趣的就自己点点看吧;
browsersync官网:https://browsersync.io/
browsersync中文网:http://www.browsersync.cn/

白俊遥博客
请先登录后发表评论
  • latest comments
  • 总共24条评论
白俊遥博客

lnx 白俊遥博客

2017-08-04 23:01:53 回复

白俊遥博客

lnx :4454545

2017-08-04 23:01:34 回复

白俊遥博客

Destiny :请问如何调试linux服务器上的代码呢

2017-06-22 15:36:20 回复

白俊遥博客

爱便流通于世 白俊遥博客

2017-06-21 13:51:06 回复

白俊遥博客

爱便流通于世 :帅白威武!

2017-06-21 13:43:07 回复

白俊遥博客

邓伟超-广州暖暖儿贸易 :1

2017-06-21 13:31:53 回复

白俊遥博客

追梦 白俊遥博客

2017-05-27 00:01:28 回复

白俊遥博客

小猪远航 :不错 学习了

2017-04-13 14:07:12 回复

白俊遥博客

轩辕天2015 :出现报错了

2017-04-12 11:07:59 回复

白俊遥博客

生动 白俊遥博客我这报错是怎么回事呢?module.js:590    throw err;

2017-04-06 10:08:09 回复

白俊遥博客

:1

2017-04-05 16:13:42 回复

白俊遥博客

❤_❤ 白俊遥博客

2017-02-08 17:38:20 回复

白俊遥博客

老鱼 :写得不错

2016-12-20 15:50:32 回复

白俊遥博客

Wake1 :可以的

2016-12-18 21:26:21 回复

白俊遥博客

php土豆 :1

2016-12-18 21:25:44 回复

白俊遥博客

php土豆 :学习一下

2016-12-18 21:25:38 回复

白俊遥博客

百爱百家 白俊遥博客测试一下

2016-12-14 10:00:47 回复

白俊遥博客

吾日三省吾身「封心锁爱」 :在吗 我想问问你的qq回调地址是什么啊我用的你的模板怎么回调qq登录不好使

2016-12-13 20:17:56 回复

白俊遥博客 白俊遥博客

云淡风晴 :我设置的回调地址:http://baijunyao.com/index.php/Api/Index/oauth/type/qq 可以对照着改试试;

2016-12-22 23:06:10 回复

白俊遥博客

雷小天 白俊遥博客我也是照着这样写的,但是在PC端没有用,手机端就行,这是怎么回事???

2016-12-24 10:57:42 回复

白俊遥博客

CI :我也是这样 但是没有效果。拉起了QQ登录 但是点击头像登陆的时候就算404呢

2016-12-24 16:18:47 回复

白俊遥博客

CI :我也是这样 但是没有效果。拉起了QQ登录 但是点击头像登陆的时候就算404呢

2016-12-24 16:18:58 回复

白俊遥博客

棕榈树2014 白俊遥博客

2016-12-13 13:51:44 回复

白俊遥博客

{"name":"路人黄"} 白俊遥博客

2016-12-12 11:04:33 回复