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

Во время верстки часто приходится постоянно обновлять страницу в браузере, чтобы увидеть изменения в HTML, CSS или PHP-файлах. Это отнимает время и быстро начинает раздражать. Процесс можно автоматизировать с помощью BrowserSync.

BrowserSync отслеживает изменения в файлах проекта и автоматически перезагружает страницу в браузере. Это удобно при верстке лендингов, шаблонов сайтов, HTML-страниц и небольших PHP-проектов.

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

Для начала нужно установить Node.js. Переходим на официальный сайт nodejs.org, скачиваем установщик и устанавливаем Node.js на компьютер.

Лучше выбирать версию LTS — она считается более стабильной и подходит для большинства рабочих задач.

Установка BrowserSync

После установки Node.js открываем консоль и устанавливаем пакет BrowserSync глобально:

npm install -g browser-sync

После установки BrowserSync можно запускать локальный сервер для проекта.

Переход в папку проекта

Сначала нужно перейти в директорию с вашим проектом. Для этого используется команда cd:

cd f:\OneDrive\WORC\sites\nikovit.ru\

Если вы работаете в Windows и нужно перейти на другой диск, используйте ключ /d. Например, чтобы перейти на диск F, можно выполнить команду:

cd /d f:\

После этого можно перейти в нужную папку проекта:

cd f:\OneDrive\WORC\sites\nikovit.ru\

Запуск BrowserSync

Теперь запускаем BrowserSync в папке проекта:

browser-sync start -s -f "*.html, *.php, css/*.css"

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

Что означают параметры команды

• -s — запуск BrowserSync в режиме локального сервера;
• -f — отслеживание изменений в файлах;
• *.html — отслеживание HTML-файлов в корне проекта;
• *.php — отслеживание PHP-файлов в корне проекта;
• css/*.css — отслеживание CSS-файлов в папке css.

Итог

Теперь при изменении HTML, PHP или CSS-файлов страница будет автоматически перезагружаться в браузере. Это ускоряет верстку и избавляет от постоянного ручного обновления страницы.