软件系统

BrowserSync高效率的前端开发浏览器同步测试工具

LensNews

之前在前端开发时,修改了html、js、css等文件想要查看效果,都必须刷新浏览器,而这个过程浪费很多时间。BrowserSync,一个高效率的前端开发浏览器同步测试工具,能让浏览器实时、快速响应您的文件更改(html、js、css、sass、less等)并自动刷新页面。无论您是前端还是后端工程师,使用它将提高您30%的工作效率。
BrowserSync高效率的前端开发浏览器同步测试工具
有了它,您不用在多个浏览器间来回切换,频繁的刷新页面。更神奇的是您在一个浏览器中滚动页面、点击等行为也会同步到其他浏览器中,这一切都可以通过可视化界面来控制。
BrowserSync高效率的前端开发浏览器同步测试工具

BrowserSync的安装步骤:

一、安装 Node.js

BrowserSync是基于Node.js的, 是一个Node模块, 如果您想要快速使用它,也许您需要先安装一下Node.js。

进入Node.js官网下载与系统相符的版本,进行安装即可,安装适用于Mac OS,Windows和Linux。

二、 安装 BrowserSync

您可以选择从Node.js的包管理(NPM)库中 安装BrowserSync。打开一个终端窗口,运行以下命令:

  1. npm install -g browser-sync

您告诉包管理器下载BrowserSync文件,并在全局下安装它们,您可以在所有项目中使用。

当然您也可以只在某个项目里使用,运行下面的命令:

  1. npm install --save-dev browser-sync

三、启动 BrowserSync

一个基本用途是,如果您只希望在css目录里对CSS文件进行修改后并同步到浏览器里。那么您只需要,在某个项目里打开终端窗口,并运行相应的命令:

静态网站

如果您只使用.html文件, 您需要使用服务器模式。 BrowserSync 将启动一个小型服务器,并提供一个URL来查看您的网站。

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

动态网站

如果您已经在运行的本地服务器PHP或类似的,您需要使用代理模式。 BrowserSync 将包裹您的虚拟主机与代理URL来查看您的网站。

  1. browser-sync start --proxy "myproject.dev" --files "css/*.css"

针对Wordpress主题如何启用BrowserSync

使用以上两种方法都没有启用成功,之后就找到BrowserSync中文网的站长,通过与他的交流,测试了一两个小时,最后才得到如果解决方法:

首先萨龙龙本地的PHP环境是用wamp搭建的,安装在D盘的根目录下,如有不同请修改。

1、在npm中输入:d:,进入到D盘

2、再输入:cd wamp/www/wordpress,进入WP目录

3、再输入:browser-sync start --proxy "localhost/wordpress" --files "wp-content/themes/**/*.css",启用BrowserSync

这样我们就可以正确地监听主题目录下的文件的修改。

本文部分内容来源BrowserSync中文网,更多内容也请前往访问。

在前端开发过程中使用BrowserSync,确实能节省不少时间,大量提高前端开发的效率,大赞!

(1)
Loading收藏(116)

本文由 远方的雪山 作者:萨龙龙 发表,转载请注明来源!

LensNews

热评文章

发表评论

CAPTCHA
*

评论: 8 条评论,访客:4 条,博主:4 条

  • liu
    liu 发布于:  回复

    我从Yoman下载的webApp开发前端,我使用grunt serve后brwersync会启一个loalhost默认端口为3000的页面,但是做到数据部分的时候,我需要提交数据到后台,而异步中的url(user/add)写入的相对地址,这样提交报错,其实是没有这个接口的,我需要怎么设置才能正确提交数据呢?

    • 萨龙龙
      萨龙龙 发布于:  回复

      这个我不是很了解,你可以到BrowserSync中文网看看或者加103934224 QQ群,群主会很乐意帮你解答。

  • 华军
    华军 发布于:  回复

    如果我是在阿里云上呢 –proxy “localhost/wordpress” 这里参数怎么写?

    • 萨龙龙
      萨龙龙 发布于:  回复

      修改localhost/wordpress这个为你服务器上wordpress安装的目录就可以

  • 太古神王
    太古神王 发布于:  回复

    这是什么浏览器,开发不是用火狐么

    • 萨龙龙
      萨龙龙 发布于:  回复

      这是个工具,在前端开发中不刷新而同步浏览器的工具!

  • 3d之家
    3d之家 发布于:  回复

    这个工具不错 感谢分享

    • 萨龙龙
      萨龙龙 发布于:  回复

      是的,做前端开发太实用了