Question

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

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

我尝试从Cloud 9终端运行，我得到以下内容：

跑步＆＃34;发球＆＃34;任务

运行＆＃34;并发：服务器＆＃34; （并发）任务

运行＆＃34;连接：livereload＆＃34; （连接）任务致命错误：端口8080是   已被另一个进程使用。

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

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

从终端我得到：

跑步＆＃34;发球＆＃34;任务

运行＆＃34;并发：服务器＆＃34; （并发）任务

运行＆＃34;连接：livereload＆＃34; （连接）任务已启动连接Web服务器   在http://0.0.0.0:9000

跑步＆＃34;观看＆＃34;任务等待......

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

Answer 1

显然，当使用 Apache 作为网络服务器时，您实际上可以在Cloud9上使用 Livereload 使用“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正在考虑多个端口）。抱歉，我不太熟悉这个实时重播。似乎grunt也需要生成一个浏览器？这不会在C9上运行。

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

如何在Cloud9 IDE中使用grunt服务？

3 个答案: