黑马程序员技术交流社区

标题: 【广州前端】人生苦短 02-browsersync简介与使用 [打印本页]

作者: neekin 时间: 2017-12-21 12:08
标题: 【广州前端】人生苦短 02-browsersync简介与使用
本帖最后由 neekin 于 2017-12-21 16:08 编辑

更多前端资源敬请关注

如果你已经按照上一篇教程安装完了gulp,我们就可以开始将gulp应用到实际开发的项目中了,但再此之前,我需要介绍一个小工具给你,这个小工具也解决了我们开发过程中的很多痛点.

0x00 前端开发的一个小痛点

每次当我们写一个标签,一个css的时候,我们需要切换到浏览器中,进行一次刷新才能看到结果.一个前端开发工程进行这样的操作一天大概会有几百上千次.每次切换刷新,这个流程大概需要2秒,粗略算一天要进行500次吧.500次就是1000秒,一整年下来,那就是4.22天,四舍五入一下就是一个星期啊.这样的操作浪费了我们整整一个星期啊.

0x01 人生苦短

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

以上摘自官方简介.

0x02 browsersync的使用

1.首先安装browserSync,打开cmd```#输入命令进行安装npm install -g browser-sync
#windwos在安装过程可能会失败,原因是缺少C++运行时库,解决方案请安装Visual Studio,或者使用cnpm.
```
2.创建一个目录和一些简单的静态文件你的目录看来应该类似这样
```
│  index.html
│
├─script
│          script.js
│
└─style
         style.css
```
我们使用cmd或者shell到这个目录里,然后使用命令
```
browser-sync start --server --files "index.html,style/*.css,script/.js"
```
如果没有报错的话,它会帮你启动一个服务器,并自动启动默认浏览器并打开了对应的网页.
3. 现在输入一些代码,你会看到,结果所写既所得,你开发WEB的效率将提升百分之30.

0x03 最后说一点

当我们知道browsersync的使用后,我们下面会将它和gulp结合在一起,构建出一个完整的前端工作流.

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2