Browsersync能让浏览器实时、快速响应你的文件更改（html、js、css、sass、less等）并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。你的任何一次代码保存，以上的设备都会同时显示你的改动”。
Browsersync可以单独使用，也可以集成到gulp和grunt这样的构建工具中使用，在node.js项目中还能结合gulp-nodemon实现全栈的自动刷新，而在移动端设备上同步调试的功能对移动web开发显然是很有帮助的。
相关网站查看 :
Browsersync中文网 - 省时的浏览器同步测试工具 http://www.browsersync.cn/
Browsersync + Gulp.js - Browsersync中文网 http://www.browsersync.cn/docs/gulp/
一、单独使用Browersync官网都讲得很详细，在此不做赘述.
二、结合gulp使用Browsersync.
1..全局安装gulp：$ npm install -g gulp
2..初始化项目生产package.json : $ npm init
3..安装项目依赖 : $ npm install --save-dev gulp browser-sync
4..在项目的gulpfile.js中新建任务 :
1 var gulp = require(‘gulp‘);
2
3 // 调用 .create() 意味着你得到一个唯一的实例并允许您创建多个服务器或代理。
4 var browserSync = require(‘browser-sync‘).create();
5
6 // 定义一个任务，任务的名字，该任务所要执行的一些操作
7 gulp.task(‘watch‘, function() {
8
9 // 启动Browsersync服务。代理服务器（proxy）或静态服务器（server）
10 browserSync.init({
11
12 // 设置监听的文件，以gulpfile.js所在的根目录为起点，如果不在根目录要加上路径，单个文件就用字符串，多个文件就用数组
13 files: ["*.html", "css/*.css", "js/*.js"],
14
15 // 启动静态服务器，默认监听3000端口，设置启动时打开的index.html的路径
16 server: { baseDir: "./" },
17
18 // 在不同浏览器上镜像点击、滚动和表单，即所有浏览器都会同步
19 ghostMode: { clicks: true, scroll: true },
20
21 // 更改控制台日志前缀
22 logPrefix: "learning browser-sync in gulp",
23
24 // 设置监听时打开的浏览器，下面的设置会同时打开chrome, firefox和IE
25 browser: ["chrome", "firefox", "iexplore"],
26
27 // 设置服务器监听的端口号
28 port: 8080 });
29 });
5..命令行中执行gulp watch任务即可启动browserSync监听.
三、Browsersync结合nodemon实现node.js项目的全栈刷新.
1..supervisor修改代码时可以自动重启服务器但不更更新浏览器,类似supervior工具的有nodemon(推荐)、node-dev、hotnode.
2.. 使用gulp+browersync+nodemon结合全战刷新express项目分两步 :
(1)，使用gulp-nodemon插件代替nodemon,使用gulp-nodemon启动node服务
(2)，启动node服务之后启动Browersync任务，监听相关文件
var gulp = require(‘gulp‘);
// 调用 .create() 意味着你得到一个唯一的实例并允许您创建多个服务器或代理。
var browserSync = require(‘browser-sync‘).create();
// 这里reload不加括号，只引用不调用
// var reload = browserSync.reload;
var nodemon = require(‘gulp-nodemon‘);
gulp.task(‘server‘, function() {
nodemon({
script: ‘app.js‘,
// 忽略部分对程序运行无影响的文件的改动，nodemon只监视js文件，可用ext项来扩展别的文件类型
ignore: ["gulpfile.js", "node_modules/", "public/**/*.*"],
env: { ‘NODE_ENV‘: ‘development‘ } }).on(‘start‘, function() {
browserSync.init({
proxy: ‘http://localhost:3000‘,
files: ["public/**/*.*", "views/**", "routes/**"],
port:8080 },
function() {
console.log("browser refreshed.");
});
});
});
原文地址：https://www.cnblogs.com/hughes5135/p/8365404.html