Инструмент для создания статических сайтов, их проектирования с помощью шаблонизатора Nunjucks и сборки с помощью Gulp+Webpack
Таблица зависимостей:
| devDependencies | dependencies |
|---|---|
| Babel | - [X]Normalize.scc |
| Webpack | - [X]RFS |
| ESLint | - [ ]FontAwesome |
| Gulp | |
| PostCSS | |
| postcss-sort-media-queries | |
| cssnano | |
| Autoprefixer | |
| sass/scss | |
| Nunjucks | |
| yargs | |
| BrowserSync | |
| Prettier | |
| Editorconfig |
Примечание: весь список зависимостей можно посмотреть в файле
package.json, в таблице выведены только самые важные.
Рекомендуемые версии node.js (проект тестировался именно на нижеследующих версиях node.js):
lts/hydrogen -> v18.18.2
-
Установите в свою систему с официального сайта NodeJS или с помощью NVM (Node Version Manager)
-
Установите
gulpглобально (т.е. для всей системы):
npm i --global gulp-cli-
После установки необходимого, перейдите в папку со скачанным проектом
-
Установите необходимые зависимости инструмента, находясь в родительском каталоге проекта и введя в терминал команду:
npm i
После успешного выполнения предыдущих шагов, настало время запустить проект! Рассмотрим команды для запуска:
команды
Режим разработчика, выполняет запуск локального сервера с проектом:
npm run devРежим сборки проекта, осуществляется сборка проекта в директорию build
npm run buildПосле успешного старта/сборки проекта, возникнет небольшое всплывающее окошко об информации в каком режиме находится инструмент (сборка/разработка)
дополнительные команды
В проекте так-же существует дополнительная мини консольная программа помощник, помогающая быстро создавать компоненты (в соответствии с архитектурой файлов и папок проекта), а так же импортировать файлы стилей компонента в файл _components_import.scss - который в свою очередь подключается в главный файл стилей проекта: main.scss.
Для того что-бы воспользоваться этой программой, для начала необходимо зарегистрировать её локально для проекта. Для этого необходимо выполнить следующие команды:
npm linkИли можно вызвать просто (но лучше всего зарегистрировать):
npm run toolПосле этого можно использовать в корне проекта команду: kit-tools в окне консоли будет информация о командах, опциях и дополнительных параметров которые допустимы при использовании данной тулзы.
Так же в package.json файле, в разделе scripts зарегистрированы команды для быстрой демонстрации kit-tools, а именно команды по архивации директории build, сначала произойдёт сборка проекта, далее выполнится команда по архивации директории.
команды для архивации в разделе scripts:
| команды | описание |
|---|---|
npm run build:archive:tgz |
собирает из исходников проект и упаковывает в tar.gz архив папку с собранным проектом. |
npm run build:archive:tar |
собирает из исходников проект и упаковывает в tar архив папку с собранным проектом. |
npm run build:archive:zip |
собирает из исходников проект и упаковывает в zip архив папку с собранным проектом. |
В данном проекте специфическая иерархия файлов и папок - расчитанная и разработанная специально под данный, конкретный проект, используя этот инструмент вы должны понимать это и использовать следующие инструкции и соглашения.
Правила для шаблонов nunjucks -> все компоненты, куски секций и файлы должны именоваться в стиле snake_case пример: header_top.njk;
Правила для стилей SCSS/SASS -> все компоненты, куски секций и прочией файлы должны именоваться в стиле snake_case пример: header_top.scss;
- а так же, если это файлы, которые являются частью какого-то другого файла, то перед названием должны использовать (префикс) то-же правило распространяется и на файлы стилей компонент! нижнее_подчеркивание _ пример:
_nav_item.scss;
Шаблоны nunjucks
src/views/:
- все компоненты создаются и находятся в соответствующей папке т.е.
src/views/components/**/* - данные компонент находятся по пути:
src/views/data/*.json - страницы проекта находятся по пути:
src/views/pages/* - секции проекта находятся по пути:
src/views/sections/*если многостраничный режим, то следует в директории с секцией создать поддиректории (используя стиль snake_case) с названиями страниц сайта и складывать в них секции зависящие от этих страниц! (перед названием секции не забываем ставить префикс нижнее_подчеркивание _) пример:src/views/sections/general_section/_header_top.njk - так же существует раздел шаблонов, находится он:
src/views/templates/*-> можно использовать для хранения там файлов с содержимымhtml <head></head>и прочими повторяющимися штуками.
Файлы стилей scss
src/styles/:
- все файлы стилей подключаются в главный файл стилей
main.scssно gulp отслеживает абсолютно все стили находящиеся в родительской директории и в поддерикториях. - директории в которых находятся стили подключаемые к файлу
main.scssследует как и содержимое директорий именовать согласно стилю snake_case, а так же использовать префикс нижнее_подчеркивание перед названием файла/директории; - если у нас подразумевается многостраничный режим вёрстки, то в директории
src/styles/_main/следует создавать поддериктории с названиями страниц и уже во внутрь складывать файлы стилей зависящие от этих страниц, пример:src/styles/_main/_general_page/_header_top.scss - директория
src/styles/_defaults/- для складирования туда сетки, всяких helper`ов, миксинов и дефолтных для проекта состояний, подключения шрифтов и т.д.
Файлы скриптов js/mjs/cjs
src/scripts/
- все файлы скриптов обрабатываются с помощью babel+webpack, в корневой директории расположения оных, есть две директории main и vendor
- в директории main - находится наш главный файл
main.mjs, допустимо плодить различные дир-рии и подключать просто всё это вmain.mjs - в директории vendor - находится файл скриптов в которые будут подключаться сторонние библиотеки, необходимые на стороне клиента в качестве полноценных библиотек.
Директория assets
src/assets/
- храним в ней шрифты, картинки, и прочий медиа-мусор
последние обновления описания: 18.06.24