Бойлерплейт на основе связки Gulp + Webpack с поддержкой SVG спрайтов и SCSS
- ... много всего из бойлерплейта
- Yandex Maps JS API
В проекте активно используются build-in-helpers препроцессора HTML Handlebars.
Теперь по порядку:
- Страницы генерируются на основе шаблонов. Шаблон хранится в папке src\partials\layouts
- Страницы, которые наследуются от шаблона, хранятся в папке pages
- В папке pages есть папка data с json-файлами. В них хранятся данные для страниц. Эти файлы принадлежат одноименным страницам, а данные в них сразу доступны для использования. Эти файлы создаются вручную
- Как это всё работает можно разобраться самому, проанализировав, например, страницу library.hbs
- Какие-то повторяющиеся куски разметки можно выносить в отдельные файлы - partials. Они хранятся в одноименной папке и вызываются в нужном месте
- SCSS
- Легко самому разобраться в структуре
- Все файлы стилей импортятся в styles.scss вручную
- Есть какие-то плагины из коробки, смотри внимательно
- Есть jQuery, GSAP и пр.
- Основной файл - main.js, находится в папке js
- Есть файл src\assets\js\backend.js, в нем прописываются, например, обработчики сабмита формы (для бекендера на PHP)
- Для пользовательских компонентов создал отдельную папку src\js\components
- Объекты можно засунуть в объект window, чтобы получить к ним доступ из файла backend.js
- Контентные изображения (которые заказчик скорее всего поменяет в будущем) помещены в папку src\img\content
- Изображения перед заливкой на гитхаб лучше сразу оптимизировать и переводить в формат webp (Squoosh)
- Иконки лучше оптимизировать через сервис SVG.OMG
- Все svg, помещенные в папку src\img\icons сборщик автоматически собирает в инлайновый спрайт, который доступен на любой странице.
- Отдельно хочу отметить страницу "Контакты". Она генерируется с помощью JS, все данные берутся из json-файла в папке src\data. Код страшный, но я оставил комментарии.
Установить Node JS, затем выполнить команду:
npm installВ режиме разработки:
npm run devВ продакшен режиме:
npm run build