如何在 Cloud9 IDE 中使用 grunt serve？

Question

在我的 Gruntfile.js 中，我尝试过这样做：

connect: {
  options: {
    port: process.env.PORT,
    hostname: process.env.IP,
    livereload: 35729
  }
}

我尝试从 Cloud 9 终端运行并得到以下信息：

运行“服务”任务

运行“concurrent:server”（并发）任务

运行“connect:livereload”（连接）任务致命错误：端口 8080 是 已被另一个进程使用。

然后我将 Gruntfile.js 更改为以下内容：

connect: {
  options: {
    port: 9000,
    hostname: process.env.IP,
    livereload: 35729
  }
}

从我得到的终端：

运行“服务”任务

运行“concurrent:server”（并发）任务

运行“connect:livereload”（连接）任务开始连接网络服务器 在http://0.0.0.0:9000

正在运行“监视”任务等待中...

但是如何从 Cloud 9 访问http://0.0.0.0:9000？ 我试过http://localhost:9000、http://127.0.0.1:9000，是不是这里漏了什么？

Answer 1

显然，当使用 Apache 作为网络服务器时，您实际上可以让 Livereload 在 Cloud9 上运行，通过使用“mod_proxy_wstunnel”将 websocket 请求代理到 grunt-watch：

1) 将以下指令添加到 /etc/apache2/mods-available/proxy_wstunnel.load

ProxyPass /livereload/ ws://127.0.0.1:35729/

2) 启用“mod_proxy_wstunnel”及其依赖“mod_proxy”

ln -s /etc/apache2/mods-available/proxy_wstunnel.load /etc/apache2/mods-enabled/proxy_wstunnel.load
ln -s /etc/apache2/mods-available/proxy.load /etc/apache2/mods-enabled/proxy.load

3) 重启 Apache

service apache2 restart

4) 到目前为止一切顺利，现在您必须通过修改 livereload.js 脚本对 Livereload 将使用的 websocket URL 进行硬编码，在我的特定情况下，它位于 ~ /myworkplace/grunt-contrib-watch/node_modules/tiny-lr/lib/public/livereload.js，您需要更改以下行：

this._uri = "ws://" + this.options.host + ":" + this.options.port + "/livereload/";

到

this._uri = "ws://YOUR_WORK_PLACE.c9.io/livereload/";

5) 最后但并非最不重要的一点是，在我的特定实例中，您必须直接在所需页面中引用 livereload.js 脚本：

<script src="/ng-boilerplate/node_modules/grunt-contrib-watch/node_modules/tiny-lr/lib/public/livereload.js"></script>

希望这可能对某人有所帮助，尤其是节省一些时间:)

Answer 2

更新：在 Cloud9 上，您可以使用端口 8080、8081 和 8082 来完成这项工作。详情和例子可以看Multiple Ports。

---

在Cloud9中，8080端口是唯一对外可访问的端口，所以请将9000改为8080。 该端口正被另一个进程使用，应首先停止该进程。使用：

kill -9 $(lsof -i:8080 -t)

然后重新启动 grunt。这会奏效。

Answer 3

当用于本地/环回连接时，您可以使用任何端口。从您的工作区外部只能访问一个端口（此时，C9 正在考虑多个端口）。我对这个livereload不太熟悉，抱歉。似乎 grunt 也需要生成浏览器？这不会在 C9 上运行。

但您为什么不使用 Cloud9 提供的“实时预览”？ 只需打开任何 html 页面，单击预览并选择“实时预览”。 所有对 css、html 的更改都会立即应用到预览框架中。