Gulp-збірка для верстки з використанням шаблонізатора PUG, CSS фреймворку Tailwind CSS та препроцесора SASS для середніх за розміром проєктів (інтернет-магазин, корпоративний сайт, сервіс).
├── .gitignore #
├── .editorconfig #
├── .prettierrc # налаштування Prettier (форматування)
├── gulpfile.js # налаштування таск-менеджеру gulp
├── package.json # залежності та npm-скрипти
└── src/ #
├── fonts/ # тека для шрифтів
│ ├── roboto/ # конкретний шрифт
│ │ ├── roboto-100.woff2 #
│ │ └── ... #
│ └── .../ #
│ #
├── img/ # тека для зображень
│ ├── content/ # контентні зображення (товар, зображення для блогу, банер, ...)
│ │ ├── product.jpg #
│ │ └── ... #
│ ├── favicon/ # фавікон та маніфест-файл
│ │ ├── favicon.ico #
│ │ └── ... #
│ ├── icons/ # інтерфейсні іконки (стрілка, пошук, чекбокс, ..)
│ │ ├── arrow-left.svg #
│ │ └── ... #
│ └── icons-content/ # контентні іконоки (логотипи, декоративні елементи, ..)
│ ├── logo.svg #
│ └── ... #
│ #
├── js/ # тека для скриптів
│ ├── all-pages.js #
│ └── ... #
│ #
├── libs/ # тека для бібліотек
│ ├── jquery-modal/ # бібліотека
│ │ ├── jquery-modal.min.js #
│ │ ├── jquery-modal.min.css #
│ │ └── ... #
│ └── .../ #
│ #
├── pug/ # тека для pug-файлів
│ ├── gulp-pages/ # головні pug-файли (які таск-менеджер перетворить в html, назва файлу відповідає назві html-сторінки)
│ │ ├── index.pug # список сторінок (технічна сторінка)
│ │ ├── home.pug # include ../pages/home/index.pug
│ │ ├── account.pug # include ../pages/account/index.pug
│ │ └── ... # include ../pages/_page-name_/index.pug
│ ├── layouts/ # глобальні pug-шаблони
│ │ ├── main.pug # шаблон всіх сторінок (doctype, head, meta, ...)
│ │ ├── _header.pug # глобальний блок (зустрічається на всіх сторінках)
│ │ ├── ... #
│ │ └── modals/ # глобальні модальні вікна (зустрічаються на всіх сторінках)
│ │ ├── _login.pug # глобальний блок (зустрічається на всіх сторінках)
│ │ └── ... #
│ ├── pages/ # шаблони конкретних сторінок
│ │ ├── home/ # сторінка та її блоки
│ │ │ ├── index.pug #
│ │ │ ├── _block.pug #
│ │ │ └── ... #
│ │ ├── account/ # сторінка та її блоки
│ │ │ ├── index.pug #
│ │ │ ├── _block.pug #
│ │ │ └── ... #
│ │ └── .../ #
│ ├── partials/ # міксини (інпут, картка товару, ...)
│ │ ├── +input.pug # міксин
│ │ └── ... #
│ └── templates/ # шаблонні елементи (хлібні крихти, пагінація, ...)
│ ├── _breadcrumbs.pug #
│ └── ... #
│ #
└── sass/ # тека для стилів
├── tailwind.css # стильовий файл Tailwind CSS
├── all-pages.sass # @import "base/*", @import "pages/all-pages/*", @import "partials/*" - загальний стильовий файл для всіх сторінок
├── home.sass # @import "pages/home/*" - загальний стильовий файл для конкретної сторінки
├── account.sass # @import "pages/account/*" - загальний стильовий файл для конкретної сторінки
├── ... #
├── base/ # базові стилі
│ ├── _base.sass #
│ ├── _fonts.sass #
│ └── ... #
├── pages/ # тека для стилів конкретних сторінок
│ ├── all-pages/ # повторювані на всіх сторінках блоки
│ │ ├── _header.sass #
│ │ └── ... #
│ ├── home/ # конкретна сторінка (блоки, секції)
│ │ ├── _block.sass #
│ │ └── ... #
│ ├── account/ # конкретна сторінка (блоки, секції)
│ │ ├── _block.sass #
│ │ └── ... #
│ └── .../ #
└── partials/ # міксини та шаблонні елементи
├── +input.sass #
├── _breadcrumbs.sass #
└── ... #
З метою оптимізації кінцевого результату та зручності підтримки продукту кожна HTML-сторінка містить в собі:
- загальні CSS-файли - ті, що використовуються на всіх сторінках (як власні стилі, так і бібліотеки):
tailwind.css...all-pages.css
- унікальні CSS-файли - ті, що використовуються лише на цій сторінці (як власні стилі, так і бібліотеки):
owl.carousel.min.cssowl.theme.default.min.css...product.css
- загальні JS-файли - ті, що використовуються на всіх сторінках (як власні скрипти, так і бібліотеки):
jquery.min.js...all-pages.js
- унікальні JS-файли - ті, що використовуються лише на цій сторінці (як власні скрипти, так і бібліотеки):
owl.carousel.min.js...product.js
+input.pug- міксин, назва файлу завжди починається з +_section.pug,_section.sass- шаблон, назва файлу завжди починається з _include _section.pug- підключити pug-файл. Шлях відносно поточного файлу@use _section.sass- підключити sass-файл. Шлях відносно поточного файлуsrc/pug/layouts/main.pug=>block css,block js,block content,block modal- місця, в яких буде знаходитись код з дочірніх сторінок, що наслідують цей шаблон
Необхідно мати Node.js та Npm.
- Встановити всі пакети:
npm i
- Запустити в режимі розробки:
npm run dev
- Зібрати production-версію:
npm run prod
- clean() - видалити вміст
docs - copyJs() - скопіювати js-файли з
src/js/*вdocs/js/(без обробки) - copyImg() - скопіювати зображення з
src/img/*вdocs/img/(без обробки) - copyLibs() - скопіювати бібліотеки з
src/libs/*вdocs/libs/(без обробки) - copyFonts() - скопіювати шрифти з
src/fonts/*вdocs/fonts/(без обробки) - devStyles() - обробити sass-файли з
src/sass/*та покласти вdocs/css - prodStyles() - обробити sass-файли з
src/sass/*та покласти вdocs/cssз постобробкою для production - jade() - обробити pug-файли з
src/pug/gulp-pages/*та покласти вdocs/ - jadeProd() - обробити pug-файли з
src/pug/gulp-pages/*та покласти вdocs/з постобробкою для production - livePreview() - запустити локальний сервер
- watchFiles() - відстежувати зміну файлів
- previewReload() - перезавантажити сервер якщо файли змінились
Особисто мені цей функціонал не потрібен. Як контентні зображення я використовую плейсхоледери, а декоративні елементи якщо вони растрові - обробляю в ручному режимі.
Тому що постійно доводиться змінювати правила обробки від проєкту до проєкту. Якість векторної графіки в дизайні буває різною, SVG може містити в собі то растрову графіку, то скрипти, то прозорість замість кольору. Це не дуже зручно, тож прийнято рішення обробляти в ручному режимі.
Тому що з цим зручно працювати лише на етапі верстки. На етапі підтримки та розвитку проєкту коли все змінюється - важко тримати його в актуальному стані.
Цей файл створено для бекенд-розробників на той випадок, коли треба терміново щось пофіксити, але немає часу розбиратись (або він не дуже в верстку). Вони пишуть туди будь-який "брудний" код, потім я його переробляю і переношу куди потрібно.
Ця змінна використовується для тих випадків, коли треба оновити файли верстки на хостингу з кешуванням. Зміна версії призведе до сприйняття файлу сервером як нового.
Це зручно з точки зору оптимізації та підтримки великих проєктів.
Якщо файл all-pages.css використовується на всіх сторінках - чому він підключається на конкретній сторінці перед іншими css-файлами, а не в src/pug/layouts/main.pug?
Тому що на конкретній сторінці можуть підключатися сторонні бібліотеки. У випадку коли нам потрібно кастомізувати цю бібліотеку перезаписом стилів в all-pages.css порядок підключення файлів може мати значення.
Для бекенд-розробників, щоб завжди було очевидно що є прихованим на цій конкретній сторінці.
Для обробки векторної графіки (svg) - SVGOMG. Для обробки растрової графіки (jpg, png, webp, ..) - Squoosh. Для генерації зображень будь-яких розмірів (плейсхолдери) - Placehold.