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

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

Содержание:

1. Установка Node.js;
2. Установка Browsersync;
3. Настройки Browsersync;
4. Быстрое использование Browsersync

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

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

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

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

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

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

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

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

npm i browser-sync -g

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

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

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

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

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

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

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

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

http://localhost:3000

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

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

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

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

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

Быстрое использование Browsersync

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

1. Создайте текстовый документ;
2. Добавьте в него browser-sync start —server —files «php/*.php,css/*.css,js/*.js,html/*.html,*.*»;
3. Сохраните;
4. Переименуйте расширение файла с .txt на .bat;
5. Скопируйте в корень нужного проекта;
6. Запускайте файл, когда вам это необходимо.

Альтернативные варианты (более предпочтительные):

• использование Gulp для обновления страницы;
• использование Live Server в Visual Studio Code.