wordpress - 在 WordPress (MAMP) 中使用 BrowserSync 和 Gulp

Question

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

我想知道在使用 MAMP 时是否有办法在 WordPress 上执行此操作？ MAMP PRO 显然使用自己的服务器，有什么方法可以让我的 gulpfile.js 在本地运行 WordPress 网站时使用 BrowserSync？

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

Answer 1

我不得不为我工作的公司解决这个问题。

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

注意:以下内容并未具体提及 MAMP，因为如果您的系统上安装了 node 和 gulp，无论站点本身在何处托管/运行，它都可以正常工作。运行 WordPress 的服务器和浏览器同步将启动的服务器是独立且无关的。作为引用，我们将它与 XAMP 一起用于开发我们的 WP 主题

具体来说，我们希望拥有一个拥有所有花里胡哨的开发环境(并且肯定包括浏览器同步)，但有一个构建的主题从开发问题(浏览器同步片段、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);

此操作会将脚本打印到您的主题头部以链接到浏览器同步服务器，并将处理您的构建过程向其抛出的所有页面刷新/注入(inject)。

此脚本指向的实际服务器在您运行 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();
};

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

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

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

其中 browserSync 很简单:

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

总结

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

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