Skip to content

Latest commit

 

History

History
139 lines (91 loc) · 5.29 KB

README.md

File metadata and controls

139 lines (91 loc) · 5.29 KB

Тестовое задание от компании Stworka

HTML5 Less Webpack

Данный проект представляет собой круговой компоненто прогресса, реализованный с использованием SVG и CSS (LESS). Компонент отображает процент выполнения задач, основываясь на общем количестве задач и количестве выполненных задач. Проект включает настройку окружения для разработки, проверку качества кода и автоматическую сборку проекта с помощью различных инструментов.

Содержание

Используемые технологии

  • HTML: для создания структуры компонента.
  • LESS: для стилизации и динамических вычислений.
  • HTMLLinter: для проверки HTML-кода на соответствие общепринятым стандартам.
  • Prettier: для автоматического форматирования кода.
  • StyleLint: инструмент для линтинга таблиц стилей.
  • CommitLint: для проверки сообщений коммитов на соответствие общепринятым стандартам.
  • Husky: для управления git-хуками.
  • Webpack: для сборки и обслуживания проекта.

Инструкция по установке

Для локальной настройки проекта выполните следующие шаги:

  1. Клонируйте репозиторий:
git clone https://github.com/NotACat1/checklist.git
  1. Установите зависимости:
npm install
  1. Установите Husky:
npx husky install

Работа с проектом

Скрипты для работы с проектом

Запуск проекта:

npm start

Запускает сервер разработки Webpack и автоматически открывает проект в браузере.

Сборка проекта для разработки:

npm run build

Выполняет сборку проекта в режиме разработки.

Сборка проекта для продакшн:

npm run production

Выполняет сборку проекта в режиме продакшн.

Линтинг LESS-файлов:

npm run lint:less

Проверяет файлы LESS на соответствие стандартам стилей.

Линтинг HTML-файлов:

npm run lint:html

Проверяет HTML-файл на соответствие стандартам.

Форматирование кода:

npm run format

Форматирует код с помощью Prettier.

Деплой на GitHub Pages:

npm run deploy

Сначала выполняет сборку проекта для продакшн, затем деплоит собранный проект на GitHub Pages.

Предварительный деплой:

npm run predeploy

Сценарий для предварительного деплоя, выполняет сборку проекта для продакшн.

Предварительный коммит:

npx lint-staged

Выполняет линтинг и форматирование файлов перед коммитом.

Редактирование проекта

Для настройки значений общего количества задач и выполненных задач отредактируйте файл component.less:

// ./src/blocks/component.less

@total-tasks: 7; // Общее количество задач
@completed-tasks: 3; // Выполненные задачи

Переменные @total-tasks и @completed-tasks используются для вычисления процента выполнения, который отображается в центре круга прогресса.