LiveReload с Gulp это — must-have инструмент для фронтенд-разработчика. LiveReload автоматически обновляет браузер при сохранении файлов, т.е. вы просто пишете код, а браузер сам обновляется.

Open Server не имеет встроенного «hot reload», поэтому будем настраивать его с помощью npm-пакетов.

Что понадобится

1. Node.js и npm
2. Gulp
3. Плагин browser-sync

Рекомендуется использовать browser-sync, так как он не требует установки расширений в браузер и работает «из коробки».

Настройка

Шаг 1. Инициализация проекта

Скачиваем Node.js с официального сайта и устанавливаем.

Запускаем терминал Windows и пишем команду для создания каталога, где будут хранится npm-пакеты:

mkdir путь_установки\npm

Рекомендую использовать путь в папку с проектами Open Server.

Далее пишем команду «change directory», чтобы выбрать путь для установки пакетов: 

cd путь_установки\npm

Команда дял инициализации npm-проекта:

npm init -y

Если комманда отработается корректно, то в указанном каталоге создастся файл-конфиг «package.json».

Шаг 2: Установка Gulp и BrowserSync

npm install --save-dev gulp browser-sync

В папке, которую указали в 1 шаге создастся папка с модулями «node_modules».

Шаг 3: Создание конфига

Открываем любой текстовый редактор и вставляем содержимое ниже предварительно изменив параметры на свои. Сохраняем файл как «gulpfile.js» в папке «npm» из 1 шага:

const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const domain = 'site.loc';
const path = '../site.loc/';
function serve() {
    browserSync.init({
        proxy: domain, // Прокси к PHP-серверу
        host: domain, // Хост вместо localhost
        port: '8080', // Порт
        open: 'external', // Автоматически открыть браузер c внешней ссылкой
        notify: true, // отключить надоедливые уведомления
    });
    // Следим за изменениями и перезагружаем браузер
    gulp.watch(path+"/**/*.php").on("change", browserSync.reload);
    gulp.watch(path+"/**/*.html").on("change", browserSync.reload);
    gulp.watch(path+"/**/*.css").on("change", browserSync.reload);
    gulp.watch(path+"/**/*.js").on("change", browserSync.reload);
}
// Экспорт задачи
exports.serve = serve;
exports.default = serve;

Меняем значения:

• «const domain» — указываем домен редактируемого проекта.
• «const path» — указываем путь до папки с проектом.
• «port» — указываем любой порт, но выше 1024, можно оставить по умолчанию 8080.

Шаг 4: Запуск Gulp

Команда, если Gulp установлен локально:

npx gulp

При каждром последующем запуске Open Server Panel необходимо запускать и «Gulp»:

cd путь_установки\npm
npx gulp

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

@echo off
cd /d "путь_установки\npm"
npx gulp
pause

Результат

• Откроется браузер с файлом index.html.
• При изменении любого HTML, CSS или JS файла — страница автоматически перезагрузится.
• Никаких расширений в браузер ставить не нужно.

Готово! Теперь у нас настроен Gulp + LiveReload через browser-sync — удобно, быстро, без плагинов.

Пример использования

Изменим на странице заголовок H1 в стандартном примере Open Server Panel через редактор Sublime Text.