How to use grunt serve in Cloud9 IDE?

问题

In my Gruntfile.js I have tried to do this:

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

I tried to run from Cloud 9 terminal and I get the following:

Running "serve" task

Running "concurrent:server" (concurrent) task

Running "connect:livereload" (connect) task Fatal error: Port 8080 is already in use by another process.

Then I have changed my Gruntfile.js to the following:

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

From the terminal I get:

Running "serve" task

Running "concurrent:server" (concurrent) task

Running "connect:livereload" (connect) task Started connect web server on http://0.0.0.0:9000

Running "watch" task Waiting...

But how do I access http://0.0.0.0:9000 from Cloud 9? I have tried http://localhost:9000, http://127.0.0.1:9000, am I missing something here?

回答1:

Update: On Cloud9, you can use ports 8080, 8081, and 8082 to make this work. For details and an example, you can look at Multiple Ports.

In Cloud9, port 8080 is the only externally accessible port, so please change 9000 to 8080. The port is in use by another process, which should be stopped first. Use:

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

and restart grunt. That will work.

回答2:

Apparently, you can actually get Livereload working on Cloud9 when using Apache as web-server, by proxying the websocket request to grunt-watch with "mod_proxy_wstunnel":

1) Add the following directive to /etc/apache2/mods-available/proxy_wstunnel.load

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

2) Enable "mod_proxy_wstunnel" and it's dependency "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) Restart Apache

service apache2 restart

4) So far so good, now you must hardcode the websocket URL that Livereload will be using, by modifying the livereload.js script, in my particular case this was located at ~/myworkplace/grunt-contrib-watch/node_modules/tiny-lr/lib/public/livereload.js, you need to change the following line:

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

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

5) Last but not least, you must reference the livereload.js script directly in your desired page, in my particular instance:

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

Hope this might help someone and especially save some time :)

回答3:

You can use any port, when it is used for local/loopback connections. From outside your workspace only one port is accessible (at this moment that is, C9 is considering multiple ports). I'm not too familiar with this livereload, sorry. It seems that grunt needs to spawn a browser as well? That will not run on C9.

But why would you not use the 'live preview' that Cloud9 provides? Just open any html page, click Preview and select 'Live preview'. All changes to css, html will be applied immediately in the preview frame.

来源：https://stackoverflow.com/questions/25682120/how-to-use-grunt-serve-in-cloud9-ide

标签

gruntjs

cloud9-ide