Skip to content

r5m-team/r5m-landing

Repository files navigation

r5m-landing

Движок для автоматизации задач разработки посадочных страниц.

Концепция

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

Идея состоит в том, что есть два репозитория:

  1. R5M Client, который содержит код движка. Этот код - одинаков на всех лендингах (с точностью до версии движка).
  2. R5M Landing, который содержит шаблон лендинга и полезные скрипты.

R5M Client

Движок сайта находится в bower_components/r5m-cms, все его зависимости - в bower_components.

TODO: unit-тесты

R5M Landing - это:

1. Package.json

В package.json есть несколько специальных конфигурационных полей:

  • r5m.deployTo - адрес production-репозитория с веткой gh-pages для команды gulp deploy
  • r5m.deployToBranch - ветка production-репозитория для команды gulp deploy (gh-pages по умолчанию)
  • r5m.htmlFiles - список файлов из tpl/, которые будут скомпилированы в HTML-файлы
  • r5m.minifyHtml - если true, то генерируемые HTML-файлы будут еще и минифицированы.
  • r5m.clientVersion - тег (ветка) из репозитория R5M Client, соответствующая используемой версии клиентского движка. Возможные значения - пустая строка (соответствует ветке master), v0.0.4, v0.0.5, v0.0.6

2. Шаблоны

Хранятся в директории tpl.

Все файлы в этой можно разделить на четыре вида:

  1. Параметры страницы (tpl/index.ejs). Отличаются названиями и всякими параметрами отдельных страниц. По умолчанию предусмотрена одна страница - index.html.
  2. Параметры проекта (tpl/_page.ejs).
    По умолчанию один шаблон, в нем находятся настройки проекта: название, подназвание, настройки почтового сервиса...
    Список полей
  3. Шаблон контента страницы (tpl/partials/index.ejs).
    По количеству - столько же, сколько и параметров страниц. Собственно контент здесь
  4. Компоненты (tpl/partials/_header.ejs).
    Header, Footer, формочки, меню - те вещи, которые повторяются из страницы в страницу.

4. Общие стили

Они находятся в коде r5m-css и содержат общечеловеческие вещи: flexible-container, стили для карусели и увеличивалки изображений.

5. Проектные стили

Директория css.

Все стили проекта включаем через @import в файл project.css.

6. Скомпилированный код/стили###

Находятся в директории dist. На сайте используются только они. Для автоматической сборки проекта при изменении кода запускаем gulp.

7. Скомпилированный HTML

Скомпилированные шаблоны находятся в корне сайта. За компиляцию отвечает gulp.

8. Sourcemaps

Рядом со скомпилированным кодом есть файл lp.js.map.

Запуск автосборки

  1. Установка зависимостей
    gulp install
    
  2. Запуск сборки
    gulp