BrowserSync-多浏览器测试工具

阅读目录

• 自动刷新
• 介绍BrowserSync
• BrowserSync具体使用
• BrowserSync配合gulp

 

自动刷新

     自动刷新，顾名思义，就是不用咱们去F5刷新。假设有一天咱们写代码，只须要ctrl + s，在浏览器上立刻就能看到页面效果，这无非就是自动刷新的范例。而BrowserSync帮助咱们作到这件事儿。固然我这儿只是简单地记录下它的应用。

 

介绍BrowserSync

BrowserSync的通常用法则不须要浏览器插件，也不用手工添加代码（尽管也提供那样的用法）。一句控制台的命令以后，不管是在手机里仍是电脑，不管用多少个浏览器（经测试，IE8+及其它），均可以拥有自动刷新的功能。详细请见官网

BrowserSync具体使用

要安装它，必然先有Node，这个就很少说。

npm install -g browser-sync

若是您只但愿在对某个css文件进行修改后会同步到浏览器里。那么您只须要运行命令行工具，进入到该项目（目录）下，并运行相应的命令：

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

以下：

你这样启动以后，你能够用谷歌浏览器、火狐浏览器、手机、ipad等同时访问 http://10.58.184.219:3000

而当我改变css时，各个浏览器上会相应的变化：

如果还想监听别的，例如html、或者整个项目，能够直接写成：

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

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

　　　　

BrowserSync配合gulp

Gulp是如今流行的自动化工具，但BrowserSync并无Gulp插件版，由于并不须要。BrowserSync有本身独立的API，将它注册为gulp的一个task便可。下面是一段gulpfile.js的示例：

var gulp = require('gulp');
var browserSync = require('browser-sync');

gulp.task('browser-sync', function() {
    browserSync({
        files: "**",
        server: {
            baseDir: "./"
        }
    });
});

gulp.task('default', ["browser-sync"]);

而后执行gulp（固然前提，先得去npm install gulp和browser-sync）

这儿的效果跟单独用browser-sync是同样的。

这篇文章所用的demo其实就是从官网上下载下来的实例：源代码