Удобная разработка с livereload, установка browser-sync

Livereload — «живая» перезагрузка страниц в браузере, при изменении в файлах проекта. Обычно очень удобно при разработке нового проекта, когда постоянно вносятся и тестируются изменения, особенно если дебажим во многих вкладках и браузерах сразу. Есть ряд реализации такой синхронизации, но рассмотрим некоторые.

Browser-sync

Документация здесь. Для установки потребуется node.js + npm, после чего в терминале устанавливаем либо глобально, либо локально в проект, командами:

Глобально:

npm install -g browser-sync

Переход в папку проекта. Локально:

npm install --save-dev browser-sync

Переходим в папку проекта (к примеру wordpress), запускаем в режиме прокси. Подходит для динамических сайтов, где могут меняться к примеру файлы .php:

browser-sync start -p "host" --files "wp-content"

Здесь стартует сервер по умолчанию прослушивающий порт :3000 (при желании меняем на любой другой опцией --port), смотрим запущенный локальный или удаленный сервер host и ту директорию в которой мы чаще всего изменяем файлы, к примеру wp-content.

demo

Недавно тестировал эту тулзу на одном текущем проекте, которым сейчас занимаюсь и стало немного комфортнее работать. Как видно на скриншоте, я подключался через Putty к своему серверу и давал эту команду. После чего перекидывает автоматически на URL с портом :3000, в моем случае это был 185.125.218.186:3000, где мы и можем наблюдать все изменения в автоматическом режиме, только лишь при изменении файлов в указанной директории. Вторая группа адресов, — это адреса к UI BrowserSync, где собственно можно задавать различные настройки.

Стоит сказать пару слов по терминалу. Бывает так, что в течении некоторого времени неактивности, сеанс вылетает. Чтобы этого не происходило, надо сделать следующее:

putty

На сервере идем в файл: /etc/ssh/sshd_config, и вносим:

TCPKeepAlive yes
ClientAliveInterval 60
ClientAliveCountMax 360

После чего во вкладке Session загружаем ранее сохраненный хост, вводим пароль. И перезапускаем ssh:

service ssh restart

Browser-sync самостоятельный модуль, для него не нужно никаких дополнительных расширении или браузерных плагинов, но также встречается, что его включат в системах сборки gulp или grunt, подробнее в документации тут и тут.

LiveReload

Оф. сайт. Программа делает тоже самое, но для нее нужно расширение для браузера и видимо она работает не со всеми редакторами. Есть и другие варианты, например можно подключить на страницу скрипт, который отправляет head запрос и сравнивает заголовок last modified.



Похожие заметки:

Программная платформа Node.js

Развивающаяся популярная платформа единого языка - реальность или миф? Основные отличия и преимущества Node.js перед другими технологиями, а также освещение сферы применения

Открыть здесь

1107

Немного про Gulp

Краткий экскурс в таск раннер Gulp

Открыть здесь

1279


Перед тем как писать комментарии, рекомендую ознакомиться:

Markdown синтаксис »

Оформление кода »

Нужна аватарка »

Комментарии


1
avatar

Юрій сказал 05-08-2018 в 13:25


Couldn't open browser (if you are using BrowserSync in a headless environment, you might want to set the open option to false как решить проблему???