Верстка проекта выполнена с учетом BEM методологии https://ru.bem.info при использовании сборщика GULP http://gulpjs.com проектов
- bower_components - зависимости bower, создается автоматически
- blocks - BEM блоки
- xs - основной уровень переопределения и элементы страницы
- sm - уровень доопределения для планшетов
- md - уровень доопределения для стандартных экранов
- lg - уровень доопределения для широких экранов
- blocks/{BEMBLOCK}/{BEMBLOCK}.jade - шаблон блока
- blocks/{BEMBLOCK}/{BEMBLOCK}.json - данные блока
- blocks/data.json - временный файл со всеми данными для блоков
- node_modules - зависимости npm
- public - временная папка со сборкой страницы проекта
- bower.json - зависимости bower
- gulpfile.js - задачи для gulp (сборщика верстки)
https://www.npmjs.com/package/npm - должно быть установлено глобально, требует поддержки git команд в консоли, после корректной установки выполнить:
npm install
http://bower.io/#install-bower - должен быть установлен глобально c помощью команды:
npm install -g bower
должны быть установлены зависимости, команда:
bower install
https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md - должен быть установлен глобально с помощью команды:
npm install --g gulp
запуск сборки проекта, команда:
gulp
Проект состоит из нескольких задач: default, server, build, html, css, images, js. Чтобы запустить конкретной задачу можно воспользоваться командой:
gulp имя_задачи
Задачи css, images, js собираются в папку html/public
Подключаемые модули gulp подключены в самом верху файла
Конфигурация сборщика храниться в объекте params и содержит следующие переменные:
- out - папка для сборки (public)
- prod - путь для сборки для основного вебсайта
- htmlSrc - собираемый макет
- html - отслеживаемые pug и json файлы
- levels - уровни переопределения
- js - внешние js файлы
- css - внешние css файлы
- images - внешние файлы изображений
- type - типы распозноваемых файлов для заданий
Запускает задачи server и build
Подготоваливает компонент browserSync, открывает браузер и смотрит за изменениями в файлах заданий: html, css, images, js, при необоходимости перезагружает браузер
Запускает задачи сборки проекта html, css, images, js
Переименовывает собираемый макет params.htmlSrc и сохраняет в params.out
Собирает указанные в params.css и params.type.css в файл с именем styles.css, сохраняет в params.out. Обрезает неиспользуемые классы стилей за исключением указанных в params.ignore (указывается либо регулярное выражение, либо css селектор)
Собирает указанные в params.images и params.type.images, сохраняет в папку params.out/images
Важно: изображения с одинаковым именем перезаписываются
Собирает указанные в params.js и params.type.js в файл с именем main.js, сохраняет в params.out
Создает файлы и папки ваших блоков в папки уровней переопределения блоков (блоки добавляются в виде строк в массив params.blocks)