如何在BrowserSync页面重载前执行Browserify命令？

哎，你想的那种--before-reload参数写法，BrowserSync本身其实并不支持哦，但别担心，有两种靠谱的办法能实现你要的「文件变更后先执行Browserify构建，再自动重载页面」的需求：

1. 用BrowserSync的API回调钩子（推荐） #

这种方式能精确控制构建和重载的时机，灵活性最高。你可以写一个简单的Node.js配置文件来实现：

新建一个bs-config.js文件，内容如下：

const browserSync = require('browser-sync').create();
const { execSync } = require('child_process');

// 启动BrowserSync本地服务器
browserSync.init({
  server: true,
});

// 监听所有js文件的变化
browserSync.watch('*.js', (event, file) => {
  if (event === 'change') {
    console.log(`文件 ${file} 已变更，开始执行Browserify构建...`);
    // 同步执行Browserify构建命令
    execSync('browserify main.js -o bundle.js');
    // 构建完成后触发页面重载
    browserSync.reload();
    console.log('构建完成，页面已重载');
  }
});

之后在你的package.json里添加一个开发脚本：

"scripts": {
  "dev": "node bs-config.js"
}

运行npm run dev就能启动服务啦，以后只要js文件有变化，就会自动先执行构建，再重载页面。

2. 用npm脚本串联命令（简洁版） #

如果不想写Node脚本，也可以借助onchange工具来实现命令串联，步骤如下：

首先安装onchange依赖：

npm install onchange --save-dev

然后在package.json里配置脚本：

"scripts": {
  "build": "browserify main.js -o bundle.js",
  "watch:build": "onchange 'main.js' -- npm run build",
  "watch:bs": "browser-sync start --server --files 'bundle.js'",
  "dev": "npm run watch:build & npm run watch:bs"
}

运行npm run dev后，onchange会监听main.js的变化，一旦文件修改就自动执行构建；而BrowserSync会监听构建后的bundle.js，只要这个文件更新就触发页面重载。

两种方式各有优劣：第一种适合需要自定义更多逻辑的场景，第二种更简洁，适合简单的开发流程。

内容的提问来源于stack exchange，提问作者ailtonbsj