Для сборки требуется:
nodejs
версии не ниже 6.9grunt
весрии не ниже 1.2npm install grunt -g
Установка зависимостей для сборки:
npm install
Сборка проекта:
npm run build
Сборка проекта c минифицированными скриптами и стилями:
npm run build-prod
Вотчер:
npm run watch
Локальный сервер:
npm run serve
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), если файл данных существует, то его данные будуьт переданы в шаблон страницы (см. пример в исходниках).
resources
Файлы ресурсов (изображения, шрифты и т.п.). Во время сборки содержимое директории копируется в ./buildresources\sprite
Директория с исходными изображениями для генерации спрайта (сама директорияresources\sprite
не копируется вbuild
). Спрайт собирается из *.png файлов, CSS-класс элемента генерируется по шаблону icon.png -> .chunk.chunk_icon. Изображения в директории@2x
предназначены для генерации спрайта для Retina-экранов (экраны с высоким PPI). См. пример в исходниках.
- В проекте по-умолчанию подключен Normalize.css
- Вотчер не следит за изменениями изображений спрайтов, т.к. сборка спрайта занимает более продолжительное время (по сравнению с другими тасками). Для сборки обновленного спрайта нужно остановить вотчер и перезапустить сборку:
$ grunt && grunt watch
. - Для работы Live Reload нужно установить расширения для браузера: Chrome-расширение; Firefox-аддон. Для корректной работы с локальными файлами нужно разрешить расширению окрывать файлы по сслкам (Chrome).
- Локальный сервер работает уже с вотчером, нет необходимости запускать вотчер отдельно.