移动端实现实时刷新

博客参考:http://blog.csdn.net/xllily_11/article/details/50417460

移动端页面调试神器-browser-sync

在做项目的过程中，用到了一个神器-- browser-sync ，在这里分享给大家。

1、静态页面调试

作为前端，肯定是要保证页面的兼容性的。

通常的测试场景是，前端人员人手N部测试机，改下页面，依次手动刷新各个手机，真的非常蛋疼，这些重复性的工作，不应该由人来完成，而应该由机器来自动完成，这时，browser-sync就体现出了它的巨大价值。

有了它，前端人员就能从繁琐的重复性工作中解脱出来，更专注的解决技术上的问题。

browsersync 依赖node.js，如何安装node.js这里就不再赘述了。

命令行上敲入下面的命令，全局安装上browser-sync：

npm install -g browser-sync

安装完成之后，我们就可以开始启动调试了。

在调试之前， 我们需要把确保测试用的手机和本地开发的机器同处在一个局域网中 。

启动调试我们分两中情况进行处理：

A、本地没有搭建服务器环境的

针对单纯的静态页面，我们需要使用到browser-sync 的 --server 命令。

假设我的静态页面都在C:/wamp/www/openadmin/style/html/目录下，

通过控制台进入到C:/wamp/www/openadmin(即把改目录当初server的root目录)，敲入下面的命令：

browser-sync start --server --files "style/html/*.html"

，

即可看到本地服务器的启动。

地址栏输入 http://localhost:3000/style/html/module.html即可看到该页面。

二:

如果在c/wamp/www/Personal 下的**html

Administrator@Z8ARGDJY90U0VHX MINGW64 /c/wamp/www/Personal

则:

 browser-sync start --server --files "index.html"

B、本地已经搭建了服务器环境的

我在本地搭好服务器，设置了vhost  local.openadmin.com 指向 C:/wamp/www/openadmin/目录

这时我只需在控制台敲入下面的命令：

browser-sync start --proxy local.openadmin.com --files "style/**"

即可启动服务。

地址栏输入 http://localhost:3000/style/html/module.html即可看到该页面。