Личный проект «Gllacy»


Не удаляйте файлы настроек проекта:

  • .editorconfig,
  • .gitattributes,
  • .gitignore,
  • .stylelintrc,
  • gulpfile.js,
  • package-lock.json,
  • package.json,
  • Contributing.md,
  • Readme.md.

Установка зависимостей проекта

В локальном репозитории уже можно писать разметку страниц, стили и создавать прочие файлы. Но разрабатывать проект будет удобнее с дополнительными инструментами (зависимостями). А для этого их установить.

1. Терминал

Для установки зависимостей понадобится терминал. В Linux и macOS он уже есть, а в Windows лучше установить git-bash, который идёт в комплекте с самим Git.

2. Node.js

Зависимости работают в среде node.js, которую тоже нужно установить, но лучше не с помощью установщика с официального сайта, а через менеджер версий ноды. Есть разные менеджеры, но проще всего установить и использовать volta.

Для установки volta в Linux и macOS в терминале выполни:

curl https://get.volta.sh | bash

В Windows проще скачать и запустить установщик.

После установки volta перезапусти (или просто открой новый) терминал и выполни установку node.js свежей LTS версии:

volta install node

После этого выполни:

node -v

Команда должна выдать версию ноды (например 18.16.0), что означает успешность установки.

3. Зависимости

Вместе с нодой стал доступен её менеджер пакетов — npm. Можно было бы использовать его, но лучше воспользоваться его альтернативой — pnpm. Установи его через volta:

volta install pnpm

В Windows эта команда может завершиться с ошибкой (pnpm не установится). В таком случае в настройках системы нужно включить режим «Для разработчика» (официальная инструкция), перезагрузиться и заново запустить команду.

После этого для установки зависимостей проекта в терминале, находясь в директории проекта, выполни:

pnpm i

Не обращай внимание на предупреждения во время установки.

После установки зависимостей можно запускать линтинг:

pnpm run lint

И сборку для разработки:

pnpm run start

При этом запустится и локальный сервер, а в брауезере откроется разрабатываемый сайт и будет обновляться при обновлении файлов в проекте.

Кстати, в этих командах можно уже использовать npm вместо pnpm. Они будут так же работать.


HTML Academy

Репозиторий создан для обучения на профессиональном онлайн‑курсе «HTML и CSS. Профессиональная вёрстка сайтов» от HTML Academy.