在前端开发中，我们经常会遇到需要同步展示页面效果的情况，这就需要使用工具来帮助我们完成自动刷新、同步浏览器等功能。browser-sync 是一个非常好用的工具，它可以自动刷新页面并同步多个浏览器的展示效果。在 browser-sync 的基础上，又开发了一个 npm 包，叫做 browser-sync-x，它可以为我们的开发工作带来很大的便利。下面，我们将详细讲解如何使用 browser-sync-x 这个 npm 包。
1. 安装
在使用 browser-sync-x 之前，需要先安装 Node.js 和 npm。在安装好 Node.js 和 npm 后，就可以通过以下命令来安装 browser-sync-x：
npm install browser-sync-x --save-dev
2. 使用
2.1 在 Gulp 中使用 browser-sync-x
在 Gulp 中使用 browser-sync-x，需要使用 gulp-browser-sync-x 这个 Gulp 插件。先安装 gulp-browser-sync-x：
npm install gulp-browser-sync-x --save-dev
然后，在 Gulpfile.js 中引入 gulp 和 gulp-browser-sync-x：
var gulp = require('gulp');
var browserSync = require('gulp-browser-sync-x');接着，定义一个 browserSync 任务：
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: 'app'
}
});
});其中，server 指定了浏览器访问的路径。执行该任务后，会自动打开一个浏览器，并显示 app 目录下的文件。
最后，在需要同步刷新浏览器的任务中，添加 browserSync.reload()：
gulp.task('watch', ['browserSync'], function() {
gulp.watch('app/*.html', browserSync.reload);
});该任务会监控 app 目录下的 html 文件，如果有改动就会触发 browserSync.reload()，然后页面就会自动刷新。
2.2 在 webpack 中使用 browser-sync-x
在 webpack 中使用 browser-sync-x，需要使用 webpack-dev-middleware 和 webpack-hot-middleware 这两个中间件。先安装它们：
npm install webpack-dev-middleware webpack-hot-middleware --save-dev
然后，在 webpack.config.js 中配置：
-- -------------------- ---- -------
--- ------- - -------------------
--- ----------- - --------------------------
--- -------------------- - ----------------------------------
--- -------------------- - ----------------------------------
--- ------ - ----------------------------
--- -------- - ----------------
--- ------------- - ------------------------------ -
----------- -------------------------
------ ----
---
--- ------------- - -------------------------------
--- -- - ---------------------
---------
------- -
-------- -------
----------- -
--------------
-------------
-
--
------ -
-----------
-
---其中，bs.init() 中的参数同样是指定浏览器访问的路径。这里使用了 webpack-dev-middleware 和 webpack-hot-middleware，可以实现自动刷新和热替换的效果。
3. 总结
通过使用 browser-sync-x 这个 npm 包，可以轻松实现多浏览器同步、自动刷新等功能，提高开发效率。在 Gulp 和 webpack 中的使用都很简单，只需要引入相应的插件，进行配置和任务调用即可。希望本文能够帮助大家更好地使用 browser-sync-x。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8accdc64669dde522e