自动刷新

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

介绍BrowserSync

BrowserSync的一般用法则不需要浏览器插件,也不用手工添加代码(尽管也提供那样的用法)。一句控制台的命令之后,无论是在手机里还是电脑,无论用多少个浏览器(经测试,IE8+及其它),都可以拥有自动刷新的功能。详细请见官网

BrowserSync具体使用

要安装它,必然先有Node,这个就不多说。

npm install -g browser-sync

如果您只希望在对某个css文件进行修改后会同步到浏览器里。那么您只需要运行命令行工具,进入到该项目(目录)下,并运行相应的命令:

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

如下:

BrowserSync-多浏览器测试工具-LMLPHP

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

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

BrowserSync-多浏览器测试工具-LMLPHP

若是还想监听别的,例如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)

BrowserSync-多浏览器测试工具-LMLPHP

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

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

  

04-14 11:02