Автообновление страницы браузера при написании кода

Чтобы браузер после сохранения изменений в редакторе кода автоматически перезагружался, нам нужно установить: Node.js и Browsersync

Как установить node.js

Для установки node.js нужно зайти на официальный сайт node.js. И скачать установочный файл.

Как установить node.js

После загрузки файла открываем его и начинаем установку Node.js.

Установка node.js

Устанавливается как обычная программа. Далее нам нужно установить Browsersync.

Как установить Browsersync

Для начала нам нужно открыть командную строку от имени администратора.

Как открыть командную строку от имени администратора

Чтобы открыть от имени администратора нужно нажать правой кнопкой мыши --> и выбрать Запуск от имени администратора.

Командная строка от имени администратора

И пишем следующее:

npm i browser-sync -g

Коротко о том что это значит:

npm - это менеджер пакетов, который входит в состав Node.js
i - означает установка
browser-sync - это установка Browsersync
-g - установить глобально, а не в какую-то конкретную папку

Итак, мы установили в нашу систему Browsersync, как теперь им пользоваться.

Заходим в папку с нашим проектом и зажимая на клавиатуре клавишу shift нажимаем правой кнопкой мыши. Выбираем в зависимости от операционной системы: открыть окно команд или Открыть окно PowerShell здесь.

Вставляем следующий текст:

browser-sync start --server --files "php/*.php,css/*.css,js/*.js,html/*.html,*.*"

После запуска этой команды откроется браузер, который будет автоматически обновляться.

Мы запустили локальный сервер, который будет отслеживать изменения в файлах нашей папки, доступен по адресу:

http://localhost:3000

Дополнительные настройки Browsersync

Также можно зайти в настройки Browsersync по адресу localhost:3001

Как настроить Browsersync

Local - локальный адрес.
External - если к сети Wi-Fi подключены другие устройства, то на них тоже можно просматривать по адресу External.
Serving files from - здесь указана папка, в которой Browsersync отслеживает изменения файлов.

Если перейти во вкладку Network Throttle, то там можно создать сервер, который будет работать с выбранной скоростью интернет-соединения. Будто мы заходим с медленного интернета.

Как настроить Network Throttle в Browsersync

Выбираем скорость соединения и нажимаем create server, автоматически создастся сервер по другому адресу, который нужно скопировать и вставить в браузер.

Официальный сайт Browsersync.

admin
16/05/2019 21:21