Grunt集成Browser Sync在Mac上站点无法访问问题求助

嘿，我之前也遇到过跨平台的Browser Sync兼容问题，结合你描述的情况——Windows上一切正常，Mac上只有这个项目出问题、其他Browser Sync项目没问题——给你几个针对性的排查和解决方向：

1. 先查Browser Sync的配置是否有平台兼容坑 #

Windows和Mac在路径、端口、文件大小写这些细节上差异不小：

• 检查Gruntfile里的browserSync配置，有没有硬写Windows风格的反斜杠路径\？Mac得用正斜杠/
• 手动指定一个端口号，比如在配置里加port: 3002，避免Mac上默认端口被其他进程悄悄占用了
• 确认server.baseDir指向的目录在Mac上路径完全正确，尤其注意文件/目录名的大小写——Windows不区分，但Mac默认是区分的，如果从Windows复制的项目有大小写不一致的情况，Browser Sync可能找不到资源

2. 揪出modernizr规则混入browserSync区块的问题 #

终端里modernizr规则跑到browserSync区块里，这大概率是Grunt任务顺序或配置冲突导致的：

• 核对Gruntfile的任务顺序，确保modernizr任务是在browserSync启动前就跑完的，别让它嵌到browserSync的任务流里
• 检查browserSync的files监听配置，是不是不小心把modernizr相关的文件加进去了？比如：

  browserSync: {
    dev: {
      files: [
        // 有没有误加这类规则？
        'src/js/modernizr.js'
      ],
      // 其他配置...
    }
  }
  

• 可以临时注释掉modernizr相关任务，再启动grunt试试，如果Browser Sync能正常加载，那就是modernizr的配置干扰了它

3. 彻底清理依赖，重新安装 #

虽然你复制了node_modules，但跨平台的node_modules里可能有平台专属的二进制文件，建议：

• 删掉Mac上的node_modules文件夹，然后重新跑npm install，避免残留的Windows依赖搞事情
• 清理npm缓存：执行npm cache clean --force（npm 3.x版本可用），再重新装依赖
• 用浏览器隐私模式打开站点，排除浏览器缓存导致的加载问题

4. 检查Mac的网络和权限设置 #

• 看看Mac的防火墙是不是把Node.js（或者Browser Sync）的网络请求给拦了，临时关掉防火墙试试
• 有没有开系统代理或浏览器代理？代理可能会干扰本地站点的访问，关掉再试
• 分别用localhost:端口号和127.0.0.1:端口号访问，有些情况下localhost的解析会出问题，用IP地址能绕过去

5. 调整依赖版本试试 #

你的grunt-browser-sync是^2.1.3，Node是v5.12.0，这个版本组合可能存在兼容性bug：

• 可以试试升级grunt-browser-sync到支持Node v5的最新版本（查npm上的版本日志，找对应兼容的版本）
• 或者降级到更稳定的2.x版本，比如2.1.0，看看能不能解决问题

如果这些方法都没搞定，建议把Gruntfile里的browserSync配置片段，还有终端执行grunt后的完整输出（就是出现modernizr规则的那段）贴出来，这样能更精准定位问题。

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