思考

BrowserSync(浏览器同步测试工具---自动刷新浏览器)

发布时间:3个月前热度: 326 ℃评论数:

工具介绍:

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


1、下载并安装node.js  [点击进入下载页面]

【因为BrowserSync是基于Node.js的, 是一个Node模块,所以使用之前需要安装node.js】    


(Windows使用cmd)输入命令行: node -v [用于查看node.js是否安装成功,显示node.js版本号,则表示安装成功。如图下所示:

 图片1


2、安装BrowserSync  [官网http://browsersync.cn]         

        从Node.js的包管理(NPM[全称:Node.js Package Manager]])库中安装BrowserSync         


        打开终端,输入以下命令行

        npm install -g browser-sync


        【别慌提示】

        Windows系统忽视以下错误:

         ....Unsupported platform for fsevents......

         原因是fsevent是在macOS下的依赖包,当前是64位win系统,因此只报warning信息[资料源自:http://www.caotama.com/90906.html]


3. 启动 BrowserSync

        进入到该项目(目录)下,并运行相应的命令,开启成功后会显示[Browsersync] Watching files...(如图所示,否则说明开启不成功。

        图片1


    静态网站        

        // --files 路径是相对于运行该命令的项目(目录)

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


        // 如果您需要监听多个类型的文件,您只需要用逗号隔开;

        // 如果你的文件层级比较深,您可以考虑使用 **(表示任意目录)匹配,任意目录下任意.css 或 .html文件。 

        browser-sync start --server --files "**/*.css, **/*.html, **/*.js"


    动态网站(php、python...)

        如果您已经有其他本地服务器环境PHP或类似的,您需要使用代理模式proxy


        // 主机名可以是ip或域名

        browser-sync start --proxy "主机名" --files "**/*.html, **/*.php"    例如:

        browser-sync start --proxy "www.test.com" --files "**/*.html, **/*.php"  

browsersync,同步,自动刷新

栏目导航

  1. 英语
  2. 效率工具

手机扫码访问