在前端开发过程中，我们常常需要在多个设备或浏览器中进行调试和测试。BrowserSync 是一个非常好用的工具，它可以通过自动刷新页面、同步滚动和表单输入等方式让开发者更加高效舒适地进行页面调试。而 dn-middleware-browser-sync 则是一个可以将 BrowserSync 集成到我们的 dn 项目中的 npm 包。
安装
通过 npm 安装 dn-middleware-browser-sync：
npm install dn-middleware-browser-sync --save
在 dn 项目的中间件配置中加入 browser-sync 中间件：
module.exports = {
middleware: [
'browser-sync'
],
// ...
}使用
基本配置
在 dn 项目中新建 bs.config.js 用于配置 BrowserSync：
module.exports = {
server: './dist',
port: 8080,
open: true
}这里定义了一个简单的服务器，它会将当前目录下的 dist 目录作为静态文件目录，并监听 8080 端口。open 值为 true 则在启动后会自动打开浏览器。
开发模式
在 dn 项目的 dev 脚本中加入以下命令：
{
"scripts": {
"dev": "dn dev --config ./bs.config.js"
}
}这样启动 dn 项目时，BrowserSync 会自动启动并打开浏览器。
生产模式
在 dn.config.js 文件中添加如下配置：
-- -------------------- ---- -------
----- ----------------------- - --------------------------------------
----- -------- - -----------------------
-------------- - -
-- ---
-------- ----- -- -- -
----- ----------- - -----------------------------------------
----- --------------------
-
-这样在 dn 项目启动时，BrowserSync 会在后台启动，并且只监听静态文件变化，不会自动刷新页面。
自定义脚本
BrowserSync 也可以执行自定义脚本来增加一些特殊的功能。在 bs.config.js 中加入 scripts 字段：
module.exports = {
// ...
scripts: {
default: 'echo "hello world"'
}
}这里定义了一个名为 default 的脚本，它的执行命令为 echo "hello world"。在控制台中输入 npm run bs -- hello 即可执行该脚本。也可以通过配置项 scripts 来指定其它的启动命令。
总结
以上就是 dn-middleware-browser-sync 的使用教程，通过这个 npm 包我们可以很方便地将 BrowserSync 集成到 dn 项目中，提高我们的开发效率和舒适度。在实际使用过程中，我们也可以根据需要进行一些自定义设置，让整个调试工作更加顺手。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f0ad6ef403f2923b035c0ce