latyshevad / bem1

Тренеруюсь верстке по методологии БЕМ

Шаблон Grunt-проекта для верстки

Использование

Для сборки требуется:

• nodejs версии не ниже 6.9
• grunt весрии не ниже 1.2 npm install grunt -g

Установка зависимостей для сборки: npm install

Сборка проекта: npm run build

Сборка проекта c минифицированными скриптами и стилями: npm run build-prod

Вотчер: npm run watch

Локальный сервер: npm run serve

Структура директорий и файлов

1. source Исходные файлы верстки (шаблоны страниц и блоков, скрипты и скрипты данных)
   • source\markup Pug (Jade) шаблоны. Документация
     • source\markup\layouts Шаблоны страниц. Один шаблон (шапка + подвал + сайдбар) может быть использован несколькими страницами
     • source\markup\pages Страницы. Страница может расширять шаблон, страницы собираются в корень директории ./build (index.pug -> index.html)
     • source\markup\blocks Шаблоны блоков. Блоки могут быть многократно использованы шаблонами и страницами.
   • source\less Файлы LESS-стилей. Документация
     • source\less\blocks Стили для блоков. Автоматически подключаются при сборке проекта (не нужно вручную подключать в style.less).
   • source\js Исходники JavaScript. При сборке все скрипты объединяются в один (main.js всегда идет первым)
   • source\data Скрипты данных для страниц. !data.js подключается при сборке каждой страницы, данные, переданные в module.exports доступны в jade-шаблоне страницы. При сборке страниц проверяется скрипт данных для страницы (index.pug -> index.js), если файл данных существует, то его данные будуьт переданы в шаблон страницы (см. пример в исходниках).
2. resources Файлы ресурсов (изображения, шрифты и т.п.). Во время сборки содержимое директории копируется в ./build
   • resources\sprite Директория с исходными изображениями для генерации спрайта (сама директория resources\sprite не копируется в build). Спрайт собирается из *.png файлов, CSS-класс элемента генерируется по шаблону icon.png -> .chunk.chunk_icon. Изображения в директории @2x предназначены для генерации спрайта для Retina-экранов (экраны с высоким PPI). См. пример в исходниках.

NB

• В проекте по-умолчанию подключен Normalize.css
• Вотчер не следит за изменениями изображений спрайтов, т.к. сборка спрайта занимает более продолжительное время (по сравнению с другими тасками). Для сборки обновленного спрайта нужно остановить вотчер и перезапустить сборку: $ grunt && grunt watch.
• Для работы Live Reload нужно установить расширения для браузера: Chrome-расширение; Firefox-аддон. Для корректной работы с локальными файлами нужно разрешить расширению окрывать файлы по сслкам (Chrome).
• Локальный сервер работает уже с вотчером, нет необходимости запускать вотчер отдельно.