/ 前端

Brower-sync多平台调试利器

子曰:“工欲善其事,必先利其器.......”

辣么就向各位推荐Brower-sync,多平台调试利器,好用得很!!!^_^


Brower-sync是干嘛用的

1.与LiveReloader相似,用于页面的自动刷新;
2.但是Browser-sync做的更完美,比如说:

你改变代码的时候,BrowserSync会重新加载页面,或者如果是css文件,会直接添加进css中,页面并不需要再次刷新。这项功能在网站是禁止刷新的时候是很有用的。假设你正在开发单页应用的第4页,刷新页面就会导致你回到开始页。使用LiveReload的话,你就需要在每次改变代码之后还需要点击四次,而当你修改CSS时,插入一些变化时,BrowserSync会直接将需要修改的地方添加进CSS,就不用再点击回退

3.BrowserSync提供了一种在多个浏览器(不管是pc端还是移动端)里测试网页的很好方式

BrowserSync也可以在不同浏览器之间同步点击翻页、表单操作、滚动位置。你可以在电脑和iPhone上打开不同的浏览器然后进行操作。所有设备上的链接将会随之变化,当你向下滚动页面时,所有设备上页面都会向下滚动(通常还很流畅!)。当你在表单中输入文本时,每个窗口都会有输入。当你不想要这种行为时,也可以把这个功能关闭。

4.此外BrowserSync还不同于LiveReloader,它不需要使用浏览器插件


安装Brower-sync

  • 安装node.js:
    如果已安装node,忽略这一步
  • 安装Browser-sync
    npm install -g browser-sync

使用Brower-sync

最简单的也是最偷懒的使用方法,比如说类似下面这个文件目录
|--app
|   |--js
|   |   |--main.js
|   |   |--scroll.js
|   |
|   |--css
|   |   |--normalize.css
|   |   |--main.css
|   |   |--scroll.css
|   |
|   |--images
|   |   |--1.png
|   |   |--2.png
|   |   |--....
|
|--index.html
|--hello.html

只需cd到app文件夹然后在终端中输入

browser-sync start --server --files "**"

然后你就会发现index.html会在浏览器中以localhost:3000端口自动打开;
需要注意的是如果你html文件如果不是index.html浏览器会反馈Cannot GET /,不用担心,你只需在地址栏输入相应的html文件名,如上文件目录hello.html,输入localhost:3000/hello.html回车,OK,nice!

单个文件监听

比如你只想监听app目录下的main.css文件的变化,那么你只需进入app文件目录,然后

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

或者监听所有css文件变化

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

gulp&Brower-sync

’高级‘用法

/**
 * This example:
 *  监听app文件夹目录下的所有文档,并实时刷新
 */
var gulp        = require('gulp'),
    browserSync = require('browser-sync');

gulp.task('browser-sync', function() {

  var files = [   //监听文件类
    'app/*.html',
    'app/css/*.css',
    'app/js/*js'
  ];

  browserSync.init(files,{
    server: {
            baseDir: "./app", //指定根目录
            index: "index.html" //指定默认打开的html文件名,可以加入文件夹入径(比如./src/home.html)
        }
    });
});

// Default task to be run with `gulp`
gulp.task('default', ["browser-sync"]);

不明白gulp的童鞋自行google,就不多累赘了。


以上均为较为普遍的做法,可以根据自己的项目需求自定义配置,更多用法详见

brower-sync官方文档

Browser-sync官网


Brower-sync相关功能模块介绍

当启动browser-sync服务后终端会有如下显示:

Alt text

如果PC在宽带连接上网的情况下开放的 External端口,即使不在同一局域网内也可以访问到你的页面,实测有效,

必须是宽带有线连接才有效,但如果是路由器中接入的网线是无效的,只能同一局域网才能访问

在浏览器中输入打开UI界面如下:

BrowserSync也可以在不同浏览器之间同步点击翻页、表单操作、滚动位置。你可以在PC和移动设备上打开不同的浏览器然后进行操作。所有设备上的链接将会随之变化,当你向下滚动页面时,所有设备上页面都会向下滚动(通常还很流畅!)。当你在表单中输入文本时,每个窗口都会有输入。当你不想要这种行为时,也可以把这个功能关闭。

这些,在这个界面都可以自行修改


如有不足之处,欢迎补充拍砖。。。。