Установка Browsersync на macOS с помощью homebrew

Browsersync.md

Устанавливаем Browsersync

Для начала настроим и запустим. У меня рабочая директория WWPass/journal2/chroot/static/ и файл tinymce.html — ты подставь свои, но в общем вот так. Далее приведу полную процедуру установки и настройки простого проекта.

# устанавливаем Node.js и вместе с ним установится npm
~ > brew update ; brew upgrade ; brew install nodejs

# устанавливаем Browsersync с помощью npm
~ > npm install -g browser-sync

# переходим в директорию проекта
~ > cd WWPass/journal2/chroot/static/

# запускаем сервер и говорим, что следим за всеми файлами
# завершить сервер можно нажатием на клавиатуре ⌃C (ctrl + C)
static:master > browser-sync start --server --files '*'
[BS] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://10.25.11.110:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://10.25.11.110:3001
 -------------------------------------
[BS] Serving files from: ./
[BS] Watching files...
[BS] File changed: tinymce.html

После этой команды откроется браузер с корнем (скорее всего будет ошибка — у меня имя файла сильно нестандартное). Меняем в браузере URL. В моём случае это http://localhost:3000/tinymce.html и можно работать. Далее ты можешь просто редактировать свой файл и браузер будет обновляться при изменениях в файлах.

Если ты хочешь открыть несколько вкладок, и чтобы они были синхронизированны, то на страницу надо будет вставить вот такой код:

<script id="__bs_script__">//<![CDATA[
    document.write("<script async src='http://localhost:3000/browser-sync/browser-sync-client.js?v=2.17.5'><\/script>".replace("HOST", location.hostname));
//]]></script>

Этот код генерирует сам Browsersync, если его запустить без дополнительных параметров:

static:master > browser-sync start
[BS] Copy the following snippet into your website, just before the closing </body> tag
<script id="__bs_script__">//<![CDATA[
    document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.js?v=2.17.5'><\/script>".replace("HOST", location.hostname));
//]]></script>

[BS] Access URLs:
 -------------------------------------
          UI: http://localhost:3001
 -------------------------------------
 UI External: http://10.25.11.110:3001
 -------------------------------------

Дополнительную информацию всегда сможешь найти в документации.

That's all, Folks!