Сборка работает на gulp 4 версии
Для работы с репозиторием на вашем компьютере потребуется Git и Node.js. Перед началом работы убедитесь, что все программы работают. Для этого в терминале введите:
-
для Git
git --version
Git примерно ответит
git version 2.42.0.windows.1
версия не важна. Главное, что git отреагировал и написал ответ
-
для Node.js
node -v
Node.js примерно ответит
v18.18.0
важно, чтобы была действующая LTS версия (первое число — чётное), то есть не ниже 20.9 или не ниже 18.18.
-
Клонируйте репозиторий:
git clone git@github.com:htmlacademy/html2-basic-template.git
-
Установите зависимости проекта:
npm ci
-
Начните работу (должен запуститься браузер):
npm start
В каждой папке есть README.md файл, который имеет более полное описание по работе с папкой
├── .github/ # Специальная папка для github
│ └── workflows/ # Автоматизация для github actions
│ ├── check.yml # Запускает линтеры на Гитхабе
│ └── gh-pages.yml # Публикует проект и создаёт ссылку на проект
├── source/ # Исходники проекта
│ ├── fonts/ # Папка для шрифтов
│ ├── images/ # Папка для хранения картинок
│ │ └── icons/ # Специальная папка для преобразования svg в спрайт(stack)
│ ├── js # Скрипты
│ │ └── script.js # Главный скрипт
│ ├── sass/ # Папка для препроцессорных файлов sass
│ │ └── blocks/ # Стили БЭМ-блоков
│ │ └── header.scss # Стили для конкретного БЭМ-блока
│ │ └── global # Файл для подключения стилей библиотек из папки
│ │ ├── fonts.scss # Подключение шрифтов к проекту
│ │ ├── global.scss # Глобальные стили, которые касаются всего проекта
│ │ └── variables.scss # Переменные для всего проекта
│ ├── vendor # Папка для сторонних бибилотек
│ └── index.html # HTML-файл для главной страницы
└── .editorconfig # Настройки форматирования текстовых файлов
└── .gitignore # Настройки игнорирования файлов для git
└── .stylelintrc # Правила для stylelint
└── gulpfile.js # Автоматизация для Gulp
└── package.json # Зависимости проекта, скрипты, настройки проекта
└── package-lock.json # Зависимости проекта
└── README.md # Документацияnpm start- запускает сборку с сервером для разработки проектаnpm run build- создаёт папкуbuildс оптимизированными файлами для продакшена
npm run optimizeImages- создаёт оптимизированные изображения вsource/images/npm run preview- позволяет посмотреть результат работы prod-версии сборкиnpm run lint- запускает все проверки (занимает длительное время)npm run lint:bem- проверяет правильное использование БЭМ в разметкеnpm run lint:markup- проверяет HTML-разметку через W3C-валидаторnpm run lint:styles- проверяет проект на совместимость с stylelintnpm run lint:spaces- проверяет отступы с помощью editorConfignpm run lint:html- проверяет разметку по правилам linthtmlnpm run lint:js- проверяет скрипты по правилам eslint
Все HTML-файлы с разметкой складывайте в папку source/.
├── source/
│ ├── index.html
│ ├── catalog.html
│ └── form.htmlИз папки source/ сборка переносит файлы в папку build/.
├── build/
│ ├── index.html
│ ├── catalog.html
│ └── form.htmlВсе стили находятся в папке source/sass/.
├── source/
│ ├── sass
│ │ └── blocks/
│ │ └── header.scss
│ │ └── global
│ │ ├── fonts.scss
│ │ ├── global.scss
│ │ └── variables.scssВсе БЭМ-блоки и остальные препроцессорные файлы подключайте в source/sass/styles.scss.
/* GLOBAL */
@import "global/variables";
@import "global/global";
@import "global/fonts";
/* BLOCKS */
@import "blocks/header";БЭМ-блоки импортируйте в секцию /* BLOCKS */.
Все препроцессорные файлы сборка обработает и превратит в styles.css. Файл styles.css сборка перенесёт в
├── build/
│ └── css/
│ └── styles.cssАбсолютно всю растровую графику с двухкратной плотностью из макета складывайте в source/.raw. Здесь графика игнорируется гитом.
После того как добавите графику сразу запускайте команду npm run optimizeImages для оптимизации графики и создания .webp-версии. Команду нужно запускать один раз при появлении новой графики в проекте.
Новая оптимизированная графика разной плотностью и суффиксами плотности в именах файлов появится в source/images. Эту, уже оптимизированную графику нужно коммитить.
Векторную графику для спрайта складывайте в source/images/icons/. Автоматизация создаст из иконок файл stack.svg.
├── source/
│ ├── .raw/
│ ├── images/
│ │ └── icons/Всю графику автоматизация перенесёт в build/images/.
├── build/
│ └── images/
│ └── icons # папка для спрайта
│ └── stack.svg # спрайт
│ ├── bg.jpg
│ ├── bg.webp
│ ├── hero.png
│ ├── hero.webp
│ └── burger.svgВсе шрифтовые файлы лежат в source/fonts/. Сборка переносит их в build/fonts/.
├── build/
│ └── fonts/
│ ├── open-sans.woff2
│ ├── open-sans.woff
│ ├── open-sans-bold.woff
│ └── open-sans-bold.woff
Все скрипты лежат в source/script/.
├── source/
│ ├── js
│ │ ├── script.js
│ │ └── modal.jsСборка переносит их в build/script/.
├── build/
│ ├── js
│ │ ├── script.js
│ │ └── modal.jsДля удобства внесения сторонних библиотек в ваш проект, вы можете использовать папку source/vendor/. В этой папке вы можете размещать любые файлы, связанные с внешними библиотеками.
Например, предположим, что вы хотите добавить в проект библиотеку, которая включает в себя как стилевой файл library.css, так и скрипты library.js. Чтобы интегрировать их в ваш проект, следуйте этим шагам:
Положите файлы библиотеки в папку source/vendor/, как показано ниже:
├── source/
│ └── vendor/
│ ├── library.css
│ └── library.jsЕсли у вас есть несколько библиотек с разными файлами, вы можете группировать файлы одной библиотеки в ее собственную подпапку. Например:
├── source/
│ └── vendor/
│ └── library/
│ ├── library.css
│ └── library.jsПри сборке вашего проекта, все файлы из папки source/vendor/ будут включены в папку build/vendor/, сохраняя их структуру. Например:
├── build/
│ └── vendor/
│ └── library/
│ ├── library.css
│ └── library.jsТаким образом, вы можете удобно организовать и внедрить сторонние библиотеки в ваш проект, сохраняя их структуру в папке source/vendor/.