Для запуска локального сервера на компьютере должен быть установлен Node.js и пакетный менеджер npm (устанавливается вместе с Node)

Установка зависимостей выполяется через терминал:

$ npm install

Запуск локального сервера и сборка файлов:

$ gulp

Если в консоль выбрасывается ошибка MODULE_NOT_FOUND нужно установить зависимость webp-converter вручную:

$ npm install [email protected] --save-dev

|__ #src        - исходники сайта
|__ docs        - готовые для деплоя файлы
.editorconfig   - файл с настройками для редактора
.gitignore      - утилитарный файл для git
.stylelintrc    - конфигурационный файл с кодгайдом для стилей
gulpfile.js     - конфигурационный файл таскраннера
package.json    - файл с описанием проекта, зависимостей и т.д.
readme.md       - документация

Все файлы проекта расположены в директории #src. Файлы с расширением *.html в корне - это страницы сайта (index.html - главная страница)

Файл CNAME необходим для корректной работы домена promo24pro и API гитхаба

Все остальные файлы, необходимые для работы сайта лежат в папках:

#src
|__doc      - файлы, которые пользователь скачивает с сайта (документы, таблицы и т.д.)
|__fonts    - директория со шрифтами
|__img      - вся графика
   |__ svg  - векторные иконки
|__js       - скрипты
|__scss     - стили

На проекте используется препроцессор SASS(SCSS), файлы лежат в папке #src/scss

Основной файл - это style.scss, все остальные файлы импортируются в него перед компиляцией

Разметка проекта выполнена по методологии БЭМ, поэтому для каждого бэм-блока существует свой файл с таким же названием

Пример:

<header class="header"> <!-- Блок header -->
  Я шапка сайта
</header>
<main class="main-content"> <!-- Блок main-content -->
  <section class="main-content__keyvisual keyvisual"> <!-- Блок keyvisual -->
    Я кейвижуал
  </section>
  <section class="main-content__table table"> <!-- Блок table -->
    Я таблица
  </section>
</main>
<footer class="footer"> <!-- Блок footer -->
  А я - подвал
</footer>

В раметке страницы присутствуют пять блоков - header, keyvisual, main-content, table и footer. Соответственно, для каждого блока мы заводим отдельный файл со стилями

scss
|__ style.scss
|__ _header.scss
|__ _keyvisual.scss
|__ _main-content.scss
|__ _table.scss
|__ _footer.scss

Кроме этого, есть отдельные файлы с переменными, миксинами и т.д.

scss
|__ animated.scss       - файл с описанием ключевых кадров для анимаций
|__ fonts.scss          - файл с подключением всех шрифтов
|__ mixins.scss         - файл с миксинами
|__ normalize.scss      - нормализатор стилей
|__ scaffolding.scss    - файл с общими стилями
|__ variables.scss      - файл с переменными

Галп автоматически готовит файлы из src к деплою, минифицирует файлы, добавляет префиксы для старых браузеров, оптимизирует графику и т.д. Итоговые файлы раположены в папке docs

ВАЖНО. Мы не вносим изменения руками в файлы, расположенные в docs! При пересборке директория docs полностью удаляется и создается заново, поэтому изменения потеряются.

Если мы хотим внести правки в сайт, нужно сделать следующее:

1. Запустить локальный сервер командой gulp
2. Внести необходимые изменения в #src (галп следит за файлами и запускает пересборку сам, с учетом новых изменений)
3. Запушить изменения в scr и итоговую папку docs (сайт в интернете обновится автоматически, как только поступят изменения в docs)