Сборка работает на 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.

1. Клонируйте репозиторий:

   git clone git@github.com:htmlacademy/html2-basic-template.git

2. Установите зависимости проекта:

   npm ci

3. Начните работу (должен запуститься браузер):

   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 - проверяет проект на совместимость с stylelint
• npm run lint:spaces - проверяет отступы с помощью editorConfig
• npm run lint:html - проверяет разметку по правилам linthtml
• npm 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/.