使用 WordPress 和 WAMP/MAMP 服务器进行 grunt livereload？答案

【问题标题】：grunt livereload with WordPress and WAMP/MAMP server?使用 WordPress 和 WAMP/MAMP 服务器进行 grunt livereload？
【发布时间】：2015-03-12 20:12:22
【问题描述】：

Existing posts 处理 grunt livereload 和 WordPress 开发解释说你仍然需要 WAMP/MAMP 来服务 PHP 和 MySQL。在所有基本的 grunt livereload 示例中，您不能只使用在端口 35729 上重新加载 index.html 的准系统服务器。我明白了。

但据我了解，我必须让我的 grunt livereload 指向与 WAMP 相同的端口，否则它们在不同的宇宙中运行，并且不会发生 livereloading 的好处。

我猜这意味着像这样设置 grunt：

      options: {
          livereload: 80
      },

但如果我这样做，就会抱怨

致命错误。 80 端口已在使用中

同样，如果我先启动 grunt 然后启动 WAMP，则 Apache 会抱怨该端口已在使用中。

那么如何让它们出现在同一页面上呢？

PS 在 WordPress 中，我的 functions.php 包括这个，根据其他地方记录的建议设置，不确定这是否也是问题的一部分：

if (in_array($_SERVER['REMOTE_ADDR'], array('127.0.0.1', '::1'))) {
    wp_register_script('livereload', 'http://localhost/myproject/livereload.js?snipver=1', null, false, true);
    wp_enqueue_script('livereload');
}

【问题讨论】：

标签： php gruntjs

【解决方案1】：

livereload 端口被网络套接字使用。当 Grunt 执行任务时，会向网页发送一条消息，说“重新加载你”。它与“基本的 grunt livereload 示例”相同。服务器通过 http 在端口 80 上传递 html（和其他文件），而 livereload 服务器侦听其他端口（如果需要，则为 35729）。我没看出这是你的问题 :-/.

我认为当您从 localhost 访问该站点时，您的 PHP 代码只需在页面上添加 <script src="http://localhost/myproject/livereload.js?snipver=1"></script>。

【讨论】：

【解决方案2】：

Apache（在 WAMP 中）在端口 80 上运行，因此您不能将其用于 livereload。做这样的事情：

// functions.php
if (in_array($_SERVER['REMOTE_ADDR'], array('127.0.0.1', '::1'))) {
    wp_register_script('livereload', 'http://localhost:9000/myproject/livereload.js?snipver=1', null, false, true);
    wp_enqueue_script('livereload');
}

// Gruntfile.js
options: {
    livereload: 9000
},

不一定是 9000 端口，只要是 80 以外的端口即可。

【讨论】：