ilyatish / fancy.shop-html

Project Base

Project Base — базовый pug шаблон для молниеносной верстки ⚡⚡⚡

Запуск проекта (команды yarn/npm)

1. yarn install
2. gulp

Структура проекта

src/assets - все ассеты проекта (стили, скрипты, картинки, шрифты и т.д.). Копируются в папку dist/assets, с предварительным парсингом шаблонов pug, c минификацией и компилированием стилей, а также c транспайлером (babel), минификацией скриптов и cжатием картинок.

Здесь находятся:

• папка sass с главным style.sass - файлом проекта с @import-ами стилей всех нужных блоков и шрифтов
• папка js с главными *.js - файлами проекта с require-ми скриптов всех нужных блоков (используется синтаксис плагина gulp-include)
• папка blocks - блоки шаблонов pug, которые подключаются include-ом к шаблонам и страницам

Для групировки блоков для других страниц рекомендуется использовать префикс @ с именем страницы, например, если в проекте есть страница about, блоки можно сложить в папку @about.

Логика сборки

PUG

1. Сборщик пропускает pug-файлы в папке src через шаблонизатор Pug.
2. Когда встречается упоминание extends, включается обработка шаблона c файла template.pug.
3. В шаблоне при нахождении include парсится шаблон блока из указанной папки.
4. В папку dist копируются скомпилированные html-файлы из папки src.

Стили

1. Сборщик пропускает sass-файлы из папок src/assets через шаблонизатор SASS.
2. Файлы с подчёркиванием '_', указанные с помощью @import, инклюдятся и компилируются. Файлы без подчёркивания компилируются автоматически в алфавитном порядке.
3. В dist/assets/css копируются скомпилированные css-файлы.

Изображения

• В папку dist/assets/img/* копируются файлы из папок src/assets/blocks/*/img, src/assets/img (изображения блока копируются в папку блока).

Скрипты

1. Сборщик пропускает js-файлы из папки src/assets/js через плагин gulp-include.
2. Babel - переписывает код современного стандарта Javascript (ES2015) на более поздний.
3. Из папок src/assets/js и src/assets/libs/*.js скрипты проходят через плагин gulp-uglify, который минифицирует скрипты.
4. Затем при помощи плагина gulp-concat, скрипты объединяются в один общий файл all.min.js.
5. В dist/assets/js копируется скомпилированный js-файл all.min.js.