与WordPress（MAMP）一起使用BrowserSync和Gulp

我已经将我的前端工作流程转移到Gulp，在开发静态站点时，我过得很不愉快。我目前使用的是BrowserSync，它会启动服务器，每次检测到更改时都会重新加载我的页面，这真是太棒了

我想知道在使用MAMP时，是否有办法用WordPress做到这一点？MAMP PRO显然使用自己的服务器，我在本地运行WordPress站点时，有没有办法告诉我的

gulpfile.js

使用BrowserSync

---

希望这是有道理的。感谢您的帮助。提前谢谢

我必须为我工作的公司解决这个问题

这项工作的结果可以在这里找到：随意浏览、使用和贡献：）

注意：以下内容并没有特别提到MAMP，因为如果您的系统上安装了node和gulp，那么无论站点本身从何处托管/运行，它都可以工作。运行WordPress的服务器和浏览器同步将启动的服务器是独立的、不相关的。作为参考，我们在工作中与XAMP一起使用它来开发我们的WP主题

具体来说，我们希望有一个具有所有功能的开发环境（其中肯定包括浏览器同步），但有一个构建的主题，该主题是从开发中清理出来的（浏览器同步片段，gulpfile.js等）

这个想法是，您只需要在dev主题中编写，比如说

wp contents/themes/example-theme\u dev

，gulp将处理它需要做的所有事情，以生成内置主题，比如说

wp content/themes/example theme

注意：这不是一个教程，只是概述了让浏览器同步与WordPress设置一起工作应该发生的一些事情。你可以自己检查一下，看看我们把一切联系在一起的全过程

浏览器同步实现 因为我们无论如何都要将文件从“开发主题”移到“构建主题”，所以我们有机会在转移文件之前转换这些文件

在开发模式期间（默认

gulp

task），其中一个转换将

因此，您的浏览器同步服务器已经启动并运行，您的主题现在可以使用脚本片段自动更新，现在剩下的就是告诉浏览器同步它应该更新什么以及何时更新

为此，我发现最好的方法是在任何转换gulp任务（如sass到css处理）完成后立即显式地告诉browser sync进行更新。大多数情况下，您只需在吞咽任务结束时添加以下内容：

.on('end', browserSync.reload);

其中，

browserSync

只是：

var browserSync = require('browser-sync');

收尾 这个答案涵盖了将浏览器同步到WP工作流中所需的基本知识。如果您感兴趣的话，您可以查看我们将所有这些放在一起的地方，看看它是如何工作的，并自己尝试一下

我们已经在该公司成功地使用了一段时间。希望你觉得它有用，如果你有任何建议，请随时插话

.on('end', browserSync.reload);

var browserSync = require('browser-sync');