Project Base — базовый pug шаблон для молниеносной верстки ⚡⚡⚡
yarn install
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-файлы в папке
src
через шаблонизатор Pug. - Когда встречается упоминание
extends
, включается обработка шаблона c файлаtemplate.pug
. - В шаблоне при нахождении
include
парсится шаблон блока из указанной папки. - В папку
dist
копируются скомпилированные html-файлы из папкиsrc
.
- Сборщик пропускает sass-файлы из папок
src/assets
через шаблонизатор SASS. - Файлы с подчёркиванием '_', указанные с помощью
@import
, инклюдятся и компилируются. Файлы без подчёркивания компилируются автоматически в алфавитном порядке. - В
dist/assets/css
копируются скомпилированные css-файлы.
- В папку
dist/assets/img/*
копируются файлы из папокsrc/assets/blocks/*/img
,src/assets/img
(изображения блока копируются в папку блока).
- Сборщик пропускает js-файлы из папки
src/assets/js
через плагинgulp-include
. - Babel - переписывает код современного стандарта Javascript (ES2015) на более поздний.
- Из папок
src/assets/js
иsrc/assets/libs/*.js
скрипты проходят через плагинgulp-uglify
, который минифицирует скрипты. - Затем при помощи плагина
gulp-concat
, скрипты объединяются в один общий файлall.min.js
. - В
dist/assets/js
копируется скомпилированный js-файлall.min.js
.