Как использовать службу grunt в Cloud9 IDE?

В моем Gruntfile.js я попытался сделать это:

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

Я попытался запустить из Cloud 9-терминала и получил следующее:

Запуск задачи "serve"

Запуск задачи "одновременный: сервер" (параллельный)

Запуск задачи "connect: livereload" (connect) Неустранимая ошибка: порт 8080 уже используется другим процессом.

Затем я изменил свой Gruntfile.js на следующее:

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

С терминала я получаю:

Запуск задачи "serve"

Запуск задачи "одновременный: сервер" (параллельный)

Запуск задачи "connect: livereload" (connect) Запуск подключения веб-сервера на http://0.0.0.0:9000

Запуск задачи "смотреть" Ожидание...

Но как мне получить доступ к http://0.0.0.0:9000 из Cloud 9? Я пробовал http://localhost:9000, http://127.0.0.1:9000, я что-то пропустил здесь?

Ответ 1

Обновление: В Cloud9 вы можете использовать порты 8080, 8081 и 8082, чтобы сделать эту работу. Для получения дополнительной информации и примера вы можете посмотреть Несколько портов.

В Cloud9 порт 8080 является единственным внешним доступным портом, поэтому, пожалуйста, измените 9000 на 8080. Порт используется другим процессом, который должен быть остановлен первым. Использование:

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

и перезапустите grunt. Это будет работать.

Ответ 2

По-видимому, вы можете получить Livereload, работающую над Cloud9 при использовании Apache, в качестве веб-сервера, проксируя запрос websocket, чтобы grunt-watch с помощью "mod_proxy_wstunnel":

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) До сих пор так хорошо, теперь вы должны жестко закодировать URL-адрес веб-каталога, который будет использовать Livereload, изменив livereload.js script, в моем конкретном случае это было расположено на ~/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 прямо на вашей желаемой странице в моем конкретном случае:

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

Надеюсь, это может помочь кому-то и особенно сэкономить некоторое время:)

Ответ 3

Вы можете использовать любой порт, если он используется для соединений local/loopback. С внешней стороны рабочей области доступен только один порт (в данный момент это C9 рассматривает несколько портов). Прошу прощения. Кажется, что хрюкать нужно также создать браузер? Это не будет работать на C9.

Но почему бы вам не использовать "предварительный просмотр", который предоставляет Cloud9? Просто откройте любую страницу html, нажмите "Предварительный просмотр" и выберите "Предварительный просмотр в реальном времени". Все изменения в css, html будут немедленно применены в кадре предварительного просмотра.