【问题标题】：Use BrowserSync and Gulp with WordPress (MAMP)将 BrowserSync 和 Gulp 与 WordPress (MAMP) 一起使用
【发布时间】：2014-10-01 23:54:18
【问题描述】：

我已将我的前端工作流程转移到 Gulp，并且在开发静态网站时度过了一段糟糕的时光。我目前使用 BrowserSync，它会在每次检测到更改时启动服务器并重新加载我的页面 - 这太棒了。

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

希望这是有道理的。任何帮助表示赞赏。提前致谢！

【问题讨论】：

标签： wordpress gulp

【解决方案1】：

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

可以在此处找到该工作的结果：https://github.com/MozaikAgency/wp-theme-bootstrap 随意浏览、使用和贡献 :)

注意：以下内容并未专门针对 MAMP，因为如果您的系统上安装了 node 和 gulp，则无论站点本身在何处托管/运行，它都可以正常工作。运行 WordPress 的服务器和浏览器同步将启动的服务器是独立且不相关的。作为参考，我们在工作中使用它与 XAMP 一起开发我们的 WP 主题

具体来说，我们希望拥有一个包含所有花里胡哨的开发环境（这肯定包括浏览器同步），但有一个干净的内置主题开发杂乱无章（浏览器同步 sn-ps、gulpfile.js 等）。

这个想法是，你只需要在开发主题中编写，比如wp-contents/themes/example-theme_dev，gulp 会处理它需要做的所有事情，以生成构建的主题，比如wp-content/themes/example-theme。

注意：这不是一个教程，只是概述了一些应该发生的事情，以使浏览器同步与 WordPress 设置一起工作。您可以查看the repo 本身，了解我们将所有内容联系在一起的完整方式。

浏览器同步实现

由于我们无论如何都要将文件从“开发主题”移动到“构建主题”，因此我们有机会在移动这些文件之前对其进行转换。

在开发模式期间（默认gulp 任务），其中一种转换将专门inject the following snippet into the bottom of your theme's functions.php

/**
 * DEVELOPMENT MODE ONLY
 *
 * Browser-sync script loader
 * to enable script/style injection
 *
 */
add_action( 'wp_head', function () { ?>
    <script type="text/javascript" id="__bs_script__">//<![CDATA[
        document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.js'><\/script>".replace("HOST", location.hostname));
    //]]></script>
<?php }, 999);

此操作将在您的主题的头部打印出一个脚本以链接到浏览器同步服务器，并将处理您的构建过程引发的所有页面刷新/注入。

当您运行 the following gulp task（也使用默认的 gulp 任务调用）时，该脚本指向的实际服务器会启动：

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

/**
 * Spin up the browser-sync
 * socket server to listen for
 * and push code changes to the
 * browser
 *
 */
module.exports = function (done) {
  browserSync({
    logSnippet: false,
    server: false,
    open: false,
    reloadDelay: 100,
    reloadDebounce: 100
  });

  done();
};

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

为此，我发现处理它的最佳方法是在任何转换 gulp 任务（如 sass 到 css 处理）运行完成后明确告诉 browser-sync 立即更新。大多数情况下，您只需在 gulp 任务的末尾添加以下内容：

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

browserSync 只是：

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

总结

此答案涵盖了将浏览器同步到 WP 工作流程所需的基础知识。您可以查看the wp-theme-bootstrap repo，我们将所有这些放在一起，以了解其工作原理的全貌，如果您有兴趣，请亲自尝试。

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

【讨论】：