我已经将我的前端工作流程转移到Gulp上，并且在开发静态网站时有一段恶心的时间。我目前使用BrowserSync，它会启动服务器并在每次检测到更改时重新加载我的页面 - 这太棒了。使用BrowserSync和Gulp与WordPress（MAMP）

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

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

来源

2014-10-01 realph

我不得不在某些地方解决这个问题。

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

注：下面没有具体提到，如果你有节点，并一饮而尽安装，因为甲基苯丙胺你系统，它将工作，而不管网站本身在哪里被托管/运行。运行WordPress的服务器和浏览器同步将启动的服务器是分开的，不相关的。作为参考，我们使用这个旁边XAMP在工作中发展我们的WP主题

具体来说，我们希望有一个开发环境，与所有的花里胡哨（这肯定包括浏览器同步），但已经建立了主题这是干净的发展cruft（浏览器同步片段，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(); 
};

所以，你有你的浏览器同步服务器和运行，你的主题现在可以使用脚本片段自动更新，现在剩下的就是告诉浏览器同步它应该更新什么，什么时候更新。

为此，我发现最好的方法是明确告诉浏览器同步在任何转换吞噬任务（如sass到css处理）完成后立即更新。主要是你只需要以下添加到您的一口任务结束：

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

其中browserSync很简单：

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

结束语

这个答案涵盖了你需要的基本知识让浏览器同步到您的WP工作流程中。你可以查看the wp-theme-bootstrap repo，我们把所有这些放在一起，看看它是如何工作的整个画面，如果你有兴趣，你可以自己试试。

我们现在已经在公司使用了一段时间了。希望你觉得它有用，如果你有任何建议可以随意加入。

来源

2015-05-12 20:45:39

使用BrowserSync和Gulp与WordPress（MAMP）

回答

浏览器同步实施

结束语

相关问题