从Mac迁移到Windows后Gulp+Browsersync无法自动重载

针对从Mac迁移到Windows后出现的Browsersync自动重载失效、文件修改无响应问题，以下是直接有效的修复方案：

1. 统一路径处理（兼容Windows路径分隔符） #

Windows使用反斜杠\作为路径分隔符，直接字符串拼接路径会导致watch无法识别文件，所有路径操作改用path.join()方法：

比如修改sass任务的路径：

// 原代码
var sassFiles = projectFolder+'/scss/*.scss';
var cssDest = projectFolder+'/_dist/css/';

// 修改后
var sassFiles = path.join(projectFolder, 'scss', '*.scss');
var cssDest = path.join(projectFolder, '_dist', 'css');

所有涉及路径的任务（pug/js/copy）以及browserSync里的watch路径都要做同样替换，例如watch部分：

// 原代码
gulp.watch(process.env.INIT_CWD+'/pug/**/*.pug', gulp.task('pug')).on('change', browserSync.reload);

// 修改后
gulp.watch(path.join(projectFolder, 'pug', '**', '*.pug'), gulp.series('pug'));

2. 调整Watch与Browsersync的联动逻辑 #

当前代码同时在watch的change事件调用browserSync.reload，又在编译任务里用browserSync.stream()，二者冲突。保留编译任务的browserSync.stream()（用于CSS无刷新注入），去掉watch的.on('change', browserSync.reload)，改为监听编译后的产物触发重载：

修改browserSync任务的watch部分：

// 监听源文件，执行编译任务
gulp.watch(path.join(projectFolder, 'pug', '**', '*.pug'), gulp.series('pug'));
gulp.watch(path.join(projectFolder, 'scss', '*.scss'), gulp.series('sass'));
gulp.watch(path.join(projectFolder, 'js', '*.js'), gulp.series('js'));
gulp.watch(path.join(projectFolder, 'assets', '**', '*.*'), gulp.series('copy'));

// 监听编译后的产物，触发页面重载
gulp.watch(path.join(projectFolder, '_dist', '**', '*.*')).on('change', browserSync.reload);

3. 修正Browsersync的路径配置 #

Windows下directFolder的拆分逻辑可能出错，直接用projectFolder的_dist目录作为Browsersync根目录，简化配置：

browserSync.init({
    injectChanges: true,
    server: {
        baseDir: path.join(projectFolder, '_dist')
    },
    browser: "chrome"
});

如果依赖本地PHP服务必须用proxy，确保startPath用相对路径：

browserSync.init({
    injectChanges: true,
    startPath: '/_dist/',
    proxy: 'localhost',
    browser: "chrome"
});

4. 验证项目路径正确性 #

在代码开头添加日志，确认projectFolder在Windows下的路径是否正确：

var projectFolder = process.env.INIT_CWD;
console.log('当前项目路径:', projectFolder); // 检查输出是否为正确的项目目录

如果路径异常，改用__dirname结合路径处理，或手动指定项目根目录。

完整修改后的browserSync任务示例 #

gulp.task('browserSync', function() {
    browserSync.init({
        injectChanges: true,
        server: {
            baseDir: path.join(projectFolder, '_dist')
        },
        browser: "chrome"
    });

    // 监听源文件触发编译
    gulp.watch(path.join(projectFolder, 'pug', '**', '*.pug'), gulp.series('pug'));
    gulp.watch(path.join(projectFolder, 'scss', '*.scss'), gulp.series('sass'));
    gulp.watch(path.join(projectFolder, 'js', '*.js'), gulp.series('js'));
    gulp.watch(path.join(projectFolder, 'assets', '**', '*.*'), gulp.series('copy'));

    // 监听编译产物触发重载
    gulp.watch(path.join(projectFolder, '_dist', '**', '*.*')).on('change', browserSync.reload);

    var file = name ? name.split('/').pop().replace('pug', 'html') : 'index.html';
    console.log(colors.green('Watching ' + path.join(projectFolder, '_dist', file)));
});

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