Сентябрь 2017
Автор: Рубрика: Верстка Комментариев нет

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

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

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

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

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

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

скачиваем open server с сайта

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

копируем проект в open server

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

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

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

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

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

  1. Переименуем index.html в index.php.
  2. Зайдем в файл и добавим php код, с выводом на экран 5 слов loremru5.
  3. Зайдем в gulpfile.js и добавим у таска watch для монитора php файлов строчку.
  4. Перейдем в gulpfile.js к месту где работает browser-synk. Он берет базовую директорию app, мы это удаляем и добавим proxy: first.ru и ставим запятую.

четыре шага подключить проект к open server

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

отображения в browsersynk для openserver

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

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

Комментариев нет

Комментарии:

Комментарии запрещены