Настройка open server для reload страниц в browsersynk

Рассмотрим интеграцию gulp и приложения browsersync, которое автоматически обновляет браузер при изменение файлов стилей, java скриптов и html c php сервером.

Если сразу хочется верстать сайт, используя framework или cms систему, например, wordpress или modx.

Настроим автоматическое обновление браузера для open server это локальная серверная php платформа.

Чтобы установить ее нужно зайти на официальный сайт и выбрать версию программы.

1. После установки open server зайдем в корневую папку программы выберем папку domains, зайдем в нее и создадим новую с названием проекта, например first.ru. Перенесем в эту папку новый проект либо готовый, который нужно интегрировать в cms.
2. Зайдем в папку программы и от администратора запустим open server.
3. Справа внизу появится иконка флажка, нажмем на нее и выберем пункт настройка.

Настройка параметров open server.

Переходим на вкладку домены и выбираем управление ручное плюс автопоиск.

Напишем имя домена и укажем папку C:\OpenServer\domains\first.ru\app, потому что в app у нас складываются все готовые результату обработок gulp task.

Сохраняем настройку и перезапустим open server.

Делаем настройки у проекта.

1. Переименуем index.html в index.php.
2. Зайдем в файл и добавим php код, с выводом на экран 5 слов loremru5.
   
   <?php echo "Далеко-далеко за словесными горами в стране.";?>

   1	<?php echo "Далеко-далеко за словесными горами в стране.";?>

3. Зайдем в gulpfile.js и добавим у таска watch для монитора php файлов строчку.
   
   gulp.task('watch', ['sass', 'scripts', 'browser-sync'], function() { gulp.watch('app/sass/**/*.sass', ['sass']); gulp.watch(['libs/**/*.js', 'app/js/common.js'], ['scripts']); gulp.watch('app/*.html', browserSync.reload); gulp.watch('app/**/*.php', browserSync.reload); });

   1 2 3 4 5 6

   gulp.task('watch', ['sass', 'scripts', 'browser-sync'], function() { gulp.watch('app/sass/**/*.sass', ['sass']); gulp.watch(['libs/**/*.js', 'app/js/common.js'], ['scripts']); gulp.watch('app/*.html', browserSync.reload); gulp.watch('app/**/*.php', browserSync.reload); });

4. Перейдем в gulpfile.js к месту где работает browser-synk. Он берет базовую директорию app, мы это удаляем и добавим proxy: first.ru и ставим запятую.
   
   gulp.task('browser-sync', function() { browserSync({ proxy: "first.ru", notify: false, }); });

   1 2 3 4 5 6

   gulp.task('browser-sync', function() { browserSync({ proxy: "first.ru", notify: false, }); });

Запускает gulp и проверяем браузер.

В итоге видим, что можно будет работать с любой cms.

Можно настроить на wordpress.