{"id":38595411,"url":"https://github.com/htmlacademy/html2-basic-template","last_synced_at":"2026-01-17T08:27:25.480Z","repository":{"id":142255494,"uuid":"542722262","full_name":"htmlacademy/html2-basic-template","owner":"htmlacademy","description":"Gulp сборка: html, sass, stack, webp.","archived":false,"fork":false,"pushed_at":"2025-11-28T13:26:06.000Z","size":11682,"stargazers_count":42,"open_issues_count":7,"forks_count":248,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-11-30T20:11:14.162Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/htmlacademy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-09-28T17:54:33.000Z","updated_at":"2025-11-28T13:25:46.000Z","dependencies_parsed_at":"2023-05-02T05:02:55.406Z","dependency_job_id":"fba5a70a-cc32-4b32-aa19-d284e5da8ae5","html_url":"https://github.com/htmlacademy/html2-basic-template","commit_stats":null,"previous_names":[],"tags_count":14,"template":true,"template_full_name":null,"purl":"pkg:github/htmlacademy/html2-basic-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/htmlacademy%2Fhtml2-basic-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/htmlacademy%2Fhtml2-basic-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/htmlacademy%2Fhtml2-basic-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/htmlacademy%2Fhtml2-basic-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/htmlacademy","download_url":"https://codeload.github.com/htmlacademy/html2-basic-template/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/htmlacademy%2Fhtml2-basic-template/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28504364,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-17T06:57:29.758Z","status":"ssl_error","status_checked_at":"2026-01-17T06:56:03.931Z","response_time":85,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-01-17T08:27:24.895Z","updated_at":"2026-01-17T08:27:25.472Z","avatar_url":"https://github.com/htmlacademy.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Сборка для HTML-курсов в HTML Academy\n\nСборка работает на gulp 5 версии\n\n## Начало\n\nДля работы с репозиторием на вашем компьютере потребуется _Git_ и _Node.js_. Перед началом работы убедитесь, что все программы работают. Для этого в терминале введите:\n\n- для _Git_\n\n ```shell\n git --version\n ```\n\n _Git_ примерно ответит\n\n ```shell\n git version 2.51.0\n ```\n\n \n\n версия не важна. Главное, что git отреагировал и написал ответ\n\n- для _Node.js_\n\n ```shell\n node -v\n ```\n\n _Node.js_ примерно ответит\n\n ```shell\n v22.20.0\n ```\n\n \n\n важно, чтобы была действующая LTS версия (первое число — чётное), то есть не ниже 22.9 или не ниже 20.9.\n\n## Установка\n\n1. Клонируйте репозиторий:\n\n ```shell\n git clone git@github.com:htmlacademy/html2-basic-template.git\n ```\n\n2. Установите зависимости проекта:\n\n ```shell\n npm ci\n ```\n\n \u003e В редких случаях в Windows отсутствует необходимый системный компонент, без которого установка зависимостей завершается ошибкой `Error: Cannot find module ../lightningcss.win32-x64-msvc.node`. Чтобы это исправить, нужно доустановить этот системный модуль: для [64-битной](https://aka.ms/vs/17/release/vc_redist.x64.exe) или [32-битной](https://aka.ms/vs/17/release/vc_redist.x86.exe) системы. После чего перезагрузиться и повторить установку зависимостей.\n\n3. Начните работу (должен запуститься браузер):\n\n ```shell\n npm start\n ```\n\n## Структура папок\n\nВ каждой папке есть `README.md` файл, который имеет более полное описание по работе с папкой\n\n```shell\n├── .github/ # Специальная папка для github\n│ └── workflows/ # Автоматизация для github actions\n│ ├── check.yml # Запускает линтеры на Гитхабе\n│ └── gh-pages.yml # Публикует проект и создаёт ссылку на проект\n├── raw/ # Папка для «сырых» файлов (игнорируются гитом)\n│ ├── icons/ # Папка для оригиналов svg-иконок\n│ └── images/ # Папка для оригиналов картинок\n├── source/ # Исходники проекта\n│ ├── favicons/ # Папка для фавиконок (кроме favicon.ico)\n│ ├── fonts/ # Папка для шрифтов\n│ ├── icons/ # Папка для оптимизированных svg-иконок для преобразования их в спрайт (stack)\n│ ├── images/ # Папка для оптимизированных картинок\n│ ├── scripts/ # Скрипты\n│ │ └── index.js # Главный скрипт\n│ ├── styles/ # Папка для препроцессорных файлов sass\n│ │ ├── blocks/ # Стили БЭМ-блоков\n│ │ │ └── header.scss # Стили для конкретного БЭМ-блока\n│ │ ├── common/ # Папка для общих стилей (не БЭМ-блоки)\n│ │ │ ├── fonts.scss # Подключение шрифтов к проекту\n│ │ │ ├── global.scss # Глобальные стили, которые касаются всего проекта\n│ │ │ └── variables.scss # Переменные для всего проекта\n│ │ └── styles.scss # Основной стилевой файл с импортами всех остальных\n│ ├── vendor # Папка для сторонних бибилотек\n│ └── index.html # HTML-файл для главной страницы\n├── .editorconfig # Настройки форматирования текстовых файлов\n├── .eslintrc # Правила для eslint\n├── .gitignore # Настройки игнорирования файлов для git\n├── .linthtmlrc # Правила для linthtml\n├── .stylelintrc # Правила для stylelint\n├── gulpfile.js # Автоматизация для Gulp\n├── package.json # Зависимости проекта, скрипты, настройки проекта\n├── package-lock.json # Зависимости проекта\n└── README.md # Документация\n```\n\n## Основные команды\n\n- `npm start` - запускает сборку с сервером для разработки проекта\n- `npm run build` - создаёт папку `build` с оптимизированными файлами для продакшена\n\n## Дополнительные команды\n\n- `npm run preview` - позволяет посмотреть результат работы prod-версии сборки\n- `npm run lint` - запускает все проверки (занимает длительное время):\n - `npm run lint:spaces` - проверяет отступы с помощью editorConfig\n - `npm run lint:markup` - проверяет HTML-разметку через W3C-валидатор\n - `npm run lint:html` - проверяет разметку по правилам linthtml\n - `npm run lint:bem` - проверяет правильное использование БЭМ в разметке\n - `npm run lint:styles` - проверяет проект на совместимость с stylelint\n - `npm run lint:scripts` - проверяет скрипты по правилам eslint\n- `npm run optimize` - запускает все оптимизации изображений (занимает длительное время):\n - `npm run optimize:raster` - оптимизирует растровые изображения из `raw/images/` в `source/images/`\n - `npm run optimize:vector` - оптимизирует векторные изображения из `raw/images/` в `source/images/`\n\n## Работа с разметкой\n\nВсе HTML-файлы с разметкой складывайте в папку `source/`.\n\n```shell\n└── source/\n ├── index.html\n ├── catalog.html\n └── form.html\n```\n\nИз папки `source/` сборка переносит файлы в папку `build/`.\n\n```shell\n└── build/\n ├── index.html\n ├── catalog.html\n └── form.html\n```\n\n## Работа со стилями\n\nВсе стили находятся в папке `source/styles/`.\n\n```shell\n└── source/\n └── styles/\n ├── blocks/\n │ └── header.scss\n ├── common/\n │ ├── fonts.scss\n │ ├── global.scss\n │ └── variables.scss\n └── styles.scss\n```\n\nВсе БЭМ-блоки и остальные препроцессорные файлы подключайте в `source/styles/styles.scss`:\n\n```scss\n/* COMMON */\n@import \"./common/variables.scss\";\n@import \"./common/global.scss\";\n@import \"./common/fonts.scss\";\n\n/* BLOCKS */\n@import \"./blocks/header.scss\";\n```\n\nБЭМ-блоки импортируйте в секцию `/* BLOCKS */`.\n\nВсе препроцессорные файлы сборка обработает и превратит в `styles.css`. Файл `styles.css` сборка перенесёт в:\n\n```shell\n└── build/\n └── styles/\n └── styles.css\n```\n\n## Работа с графикой\n\n### Растр\n\nАбсолютно всю растровую графику с **двухкратной плотностью** из макета складывайте в `raw/images/`. Здесь графика игнорируется гитом.\n\nПосле того как добавите графику сразу запускайте команду `npm run optimize:raster` (или просто `npm run optimize`) для оптимизации графики и создания `.webp`-версии. Команду нужно запускать один раз при появлении новой графики в проекте.\n\nНовая оптимизированная графика с разной плотностью и суффиксами плотности в именах файлов появится в `source/images`. Эту, уже оптимизированную графику нужно коммитить.\n\n### Вектор\n\nВекторную графику для спрайта (иконки) складывайте в:\n\n```shell\n└── raw/\n └── icons/\n```\n\nКонтентную векторную графику (логотип, графики, иллюстрации) складывайте в:\n\n```shell\n└── raw/\n └── images/\n```\n\nЗапуск команды `npm run optimize:vector` поместит оптимизированные копии этих svg-файлов в соответствующие папки в исходниках:\n\n```shell\n└── source/\n ├── icons/\n └── images/\n```\n\n### Сборка\n\nПри продакшен-сборке автоматизация перенесёт всю графику из `source/images/` в `build/images/`, а из иконок в `source/icons/` создаст спрайт `build/icons/stack.svg`.\n\n**НО!** При сборке для разработки автоматизация собирает только спрайт в `build/icons/`. Папки `images/` в `build/` не будет совсем — это нормально, дев-сервер знает, что при запросе этих изображений ему надо смотреть в `source/images/`. Это также относится к фавиконкам и шрифтам.\n\n```shell\n└── build/\n ├── icons/ # при любой сборке\n │ └── stack.svg\n └── images/ # только при продакшен-сборке\n ├── hero@1x.png\n ├── hero@1x.webp\n ├── hero@2x.png\n ├── hero@2x.webp\n └── logo.svg\n```\n\n### Фавиконки\n\nВарианты фавиконок форматов PNG и SVG следует размещать в `source/favicons/`.\n\nФайлы `favicon.ico` и `manifest.webmanifest` — в `source/`:\n\n```shell\n└── source/\n ├── favicons/\n │ ├── 180.png\n │ ├── 192.png\n │ ├── 512.png\n │ └── icon.svg\n ├── favicon.ico\n └── manifest.webmanifest\n```\n\n## Работа со шрифтами\n\nВсе шрифтовые файлы лежат в `source/fonts/`. Сборка переносит их в `build/fonts/`.\n\n```shell\n└── build/\n └── fonts/\n ├── open-sans.woff2\n └── open-sans-bold.woff2\n\n```\n\n## Работа со скриптами\n\nВсе скрипты лежат в `source/scripts/`.\n\n```shell\n└── source/\n └── scripts/\n ├── index.js\n └── modal.js\n```\n\nСборка переносит их в `build/scripts/`.\n\n```shell\n└── build/\n └── scripts/\n ├── index.js\n └── modal.js\n```\n\n## Работа со сторонними библиотеками\n\nДля удобства внесения сторонних библиотек в ваш проект, вы можете использовать папку `source/vendor/`. В этой папке вы можете размещать любые файлы, связанные с внешними библиотеками.\n\nНапример, предположим, что вы хотите добавить в проект библиотеку, которая включает в себя как стилевой файл `library.css`, так и скрипты `library.js`. Чтобы интегрировать их в ваш проект, следуйте этим шагам:\n\nПоложите файлы библиотеки в папку `source/vendor/`, как показано ниже:\n\n```shell\n└── source/\n └── vendor/\n ├── library.css\n └── library.js\n```\n\nЕсли у вас есть несколько библиотек с разными файлами, вы можете группировать файлы одной библиотеки в ее собственную подпапку. Например:\n\n```shell\n└── source/\n └── vendor/\n └── library/\n ├── library.css\n └── library.js\n```\n\nПри сборке вашего проекта, все файлы из папки `source/vendor/` будут включены в папку `build/vendor/`, сохраняя их структуру. Например:\n\n```shell\n└── build/\n └── vendor/\n └── library/\n ├── library.css\n └── library.js\n```\n\nТаким образом, вы можете удобно организовать и внедрить сторонние библиотеки в ваш проект, сохраняя их структуру в папке `source/vendor/`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhtmlacademy%2Fhtml2-basic-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhtmlacademy%2Fhtml2-basic-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhtmlacademy%2Fhtml2-basic-template/lists"}