BrowserSync вместо LiveReload: как настроить автообновление страницы при сохранении, если Sublime Text больше не работает

LiveReload больше не работает — что делать?

Раньше всё работало как часы. Сохранил CSS или PHP в Sublime — и страница сразу обновилась через расширение LiveReload в Chrome. Можно было работать в ритме: правишь — смотришь. Но это было раньше...

Сейчас всё сломалось. Chrome больше не поддерживает старое расширение, macOS мешает слежению за файлами, а страница молчит даже после правки. Перезапуск вручную — уже привычка. ⌘R, снова ⌘R… Поток теряется, особенно на проектах с шаблонами Bitrix.

Если у тебя локальный сайт на MAMP (или аналоге) и ты устаёшь обновлять каждую вкладку руками — знакомо. Эта проблема у всех, кто не хочет ставить тяжёлые сборщики вроде Webpack. Нужен лёгкий инструмент: с поддержкой PHP, быстрой реакцией и простым запуском.

Выход есть — и он стабильнее, чем старое решение. Ниже я покажу, как настроить замену, которая работает. Без шаманства, с нормальной скоростью для любых CMS.

Как было раньше: расширение в Chrome + Sublime Text

Многие годы схема была простой и понятной: ставим расширение LiveReload в Chrome, подключаем его к редактору — например, Sublime Text — и получаем автоматическую перезагрузку страницы при каждом сохранении. Никаких прокси, терминалов и зависимостей.

Особенно удобно было при верстке под Bitrix: изменил шаблон или стиль — браузер обновился. Не нужно жать Cmd + R, не нужно выискивать, в каком табе какая страница. Простота была настоящим преимуществом.

Почему теперь всё сломалось: Chrome, macOS, отсутствие поддержки

Если вы пробовали недавно установить LiveReload, то наверняка столкнулись с проблемой: расширение в Chrome отключено, и включить его нельзя. Даже если оно осталось в списке, переключатель неактивен. Причина — расширение больше не поддерживается и не соответствует текущим требованиям Chrome по безопасности.

К этому добавилось ужесточение политики macOS: из-за System Integrity Protection и других ограничений локальные процессы не всегда могут свободно взаимодействовать с браузером. Это особенно касается старых решений, у которых нет подписей или поддержки новых API.

В итоге привычная связка Sublime + LiveReload перестаёт работать, а попытки оживить её упираются в ограничения на уровне ОС и браузера. А значит — пора искать современное решение.

Решение — BrowserSync: современный способ автообновления

Как он работает: слежение за файлами + прокси сайта

BrowserSync запускает локальный сервер, который проксирует ваш проект — например, https://osinpro.local. Он следит за файлами: CSS, PHP, JS — и при каждом сохранении автоматически обновляет браузер. Причём без участия расширений и сторонних тулбаров.

Для CSS — обновление происходит без перезагрузки страницы. Для PHP и JS — имитируется нажатие F5. В результате вы моментально видите изменения: сверстал блок — обновилось, поправил стиль — применилось, переделал кусок PHP — и он сразу заработал.

Почему подходит под Bitrix и MAMP

BrowserSync отлично дружит с Bitrix, потому что не вмешивается в код CMS и не требует изменений в шаблоне. Он просто следит за файлами и даёт вам интерфейс для быстрой разработки.

Работа на MAMP PRO с доменом типа osinpro.local — классический сценарий. BrowserSync подключается к нему как прокси, оборачивает в себя и начинает отслеживать изменения. Никаких конфликтов с .htaccess или кешем Bitrix не возникает.

Преимущества: CSS без перезагрузки, PHP с мгновенным F5, синхронизация устройств

• Мгновенное обновление стилей без перезагрузки страницы;
• Автообновление при правках PHP и JS (эмуляция F5);
• Открытие сайта одновременно на нескольких устройствах;
• Синхронный скроллинг, клики, формы — удобно для тестов;
• Не требует плагинов и расширений — работает «из коробки».

Если вы верстаете под Bitrix — это must-have. Особенно в условиях, когда LiveReload больше не активируется, а Gulp — это уже «лишняя экосистема» для простого проекта.

Что понадобится для запуска

Сайт локально на MAMP PRO (например, osinpro.local)

Если вы работаете с 1С-Битрикс локально, скорее всего, у вас уже настроен MAMP PRO или аналогичный сервер. Важно, чтобы сайт открывался по доменному имени вроде https://osinpro.local — именно его мы будем проксировать через BrowserSync.

Установленный Node.js и npm

BrowserSync работает через Node.js. Если у вас ещё не установлен Node.js, скачайте его с официального сайта и установите. Вместе с ним установится npm — менеджер пакетов.

Проверьте установку этих модулей в терминале:

node -v
npm -v

Немного терпения — всё остальное автоматизируем

Дальше всё просто: один конфигурационный файл, одна команда — и ваш сайт начнёт обновляться при каждом сохранении. Не нужно вспоминать команды, ничего не нужно запускать вручную.

В следующем блоке покажу, как настроить всё пошагово.

Пошаговая настройка BrowserSync для Bitrix на macOS

1. Установка BrowserSync через терминал

Откройте Terminal и выполните глобальную установку BrowserSync командой:

npm install -g browser-sync

2. Создание конфигурации bs-config.js

Создайте файл bs-config.js в корне локального проекта. Это конфигурация, по которой BrowserSync будет работать:

// Содержимое bs-config.js
module.exports = {
    // Адрес локального сайта, через который будет работать прокси BrowserSync
    proxy: "https://osinpro.local", // ваш локальный сайт
    https: false,

    files: [
        "**/*.php",
        "**/*.css",
        "**/*.js",
        "!bitrix/**/*"
    ],

    open: true,
    notify: false,
    injectChanges: true,
    ghostMode: false
};

3. Запуск синхронизации и открытие сайта на http://localhost:3000

В терминале перейдите в папку проекта и запустите:

cd /Users/aleksandrosin/Sites/osinpro.ru
browser-sync start --config bs-config.js

После запуска сайт откроется на http://localhost:3000, а все изменения в отслеживаемых файлах будут автоматически отображаться в браузере.

Готовое решение под Bitrix

Вот рабочий конфиг, которым я пользуюсь для Bitrix. Отслеживает шаблон, игнорирует системные папки, и реально ускоряет работу.

Рабочий bs-config.js с комментариями

module.exports = {
    proxy: "https://osinpro.local", // ваш локальный сайт (например, через MAMP PRO)
    https: false,                   // используем HTTPS от локального окружения
    files: [
        "**/*.php",                // отслеживаем все PHP-файлы
        "**/*.css",                // отслеживаем все CSS-файлы
        "**/*.js",                 // отслеживаем все JS-файлы
        "!bitrix/**/*"             // исключаем системную папку bitrix
    ],
    open: true,                    // автоматически откроет сайт в браузере
    notify: false,                 // отключаем уведомления
    injectChanges: true,          // обновление CSS без полной перезагрузки
    ghostMode: false               // отключаем синхронизацию действий между вкладками
};

Заключение

Если вы работаете с версткой на 1С-Битрикс — особенно локально, особенно с шаблонами и стилями — BrowserSync становится буквально must-have. Он возвращает то, чего многим не хватает: скорость, реактивность и удовольствие от процесса.

Вместо постоянного ⌘R, перезагрузок и «а где мой стиль?» — вы просто пишете код, сохраняете файл, и страница обновляется мгновенно. Никаких плагинов, никаких плясок с Chrome и Sublime, никаких костылей. Только вы, редактор и результат в браузере.

Полезные ссылки и файлы