浏览器同步实施

Question

我已经将我的前端工作流程转移到了Gulp，并且在开发静态网站时遇到了一段时间。我目前使用BrowserSync，每次检测到更改时都会旋转服务器并重新加载我的页面 - 这很棒。

我想知道在使用MAMP时是否有办法使用WordPress？有了MAMP PRO显然使用自己的服务器，我可以告诉我的gulpfile.js在本地运行WordPress网站时使用BrowserSync吗？

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

Answer 1

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

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

注意：以下内容并未特别提及MAMP，因为如果您的系统上安装了node and gulp，则无论站点本身在何处托管/运行，它都能正常工作。运行WordPress的服务器和浏览器同步将启动的服务器是分开且无关的。作为参考，我们在XAMP工作中使用它来开发我们的WP主题

具体来说，我们希望拥有一个包含所有铃声和口哨的开发环境（并且肯定包括浏览器同步），但是有一个构建的主题 development cruft（browser-sync snippets，gulpfile.js等）。

这个想法是，你只会在开发主题中写，让我们说wp-contents/themes/example-theme_dev，并且gulp会处理它需要做的所有事情，以生成构建的主题，进入让我们说wp-content/themes/example-theme。

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

浏览器同步实施

因为我们无论如何都要从＆＃34; dev主题移动文件＆＃34;建立主题＆＃34;我们有机会在转移它们之前转换这些文件。

在开发模式（默认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();
};

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

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

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

其中browserSync只是：

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

总结

此答案涵盖了将浏览器同步到WP工作流程所需的基础知识。你可以查看the wp-theme-bootstrap repo我们把所有这些放在一起，看看它是如何工作的全貌，如果你有兴趣，可以自己试试。

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

使用BrowserSync和Gulp与WordPress（MAMP）

1 个答案:

浏览器同步实施

总结