browser-sync（监测文件修改，自动刷新浏览器）

安装

npm i -g browser-sync

调试静态页面（单纯的css、js或者html页面）

在当前需要调试目录下，打开命令行窗口，输入命令：browser-sync start --server --files "*/*" ，这样就会根据当前目录启动一个小的服务器，这个目录下的所有文件只要修改，访问的地址就会自动刷新。

启动 Browser-Sync 方式

需要到监测的文件夹下

静态网站

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

动态网站

browser-sync start --proxy "主机名" "**/*.css,**/*.html,**/*.js"

注意：

• 不能是中文路径
• 默认首页是index.html，可以配合使用gulp/grunt等进行修改配置

在gulp中的使用

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
// 本地开发代理跨域请求用的插件
const proxyMiddleware = require('http-proxy-middleware');
// 定义proxy规则，供下面创建服务使用，以/service/开头的代理到target域名下
const proxy= proxyMiddleware(['/service/'],{target:'http://xxx.xxxx.com',changeOrigin: true});

// 静态服务器
gulp.task('browser-sync', function() {
    browserSync.init({
		notify: false,不显示在浏览器中的任何通知。
		port: 9000,//使用（而不是一个自动检测到Browsersync）特定端口 
		server: {
		  baseDir: ['.tmp', 'app'],//服务器的根目录，可以一个或多个
		  routes: {//引入文件路径替换
			'/bower_components': 'bower_components'
		  },
		  //这是代理跨域，规则上面已经定义了
		  middleware: [proxy]
    });
});

转载：gulp常用插件之browser-sync使用 - 较瘦 - 博客园