prkhmnk / clever-baby

Personal Project "Clever Baby" by HTML Academy

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

Команды терминала

Установка:

npm i

или

npm i --legacy-peer-deps

(i) флаг --legacy-peer-deps позволит продолжить установку при возникновении конфликтов зависимостей (версий пакетов).

Запуск режима разработчика (c запуском сервера)

npm run dev

Запуск сборки проекта (без запуска сервера, только финальная сборка)

npm run build

Запуск сборки проекта и выгрузка результата на сервер по FTP. (без запуска локальконо сервера)

Конфигурация FTP находится в файле gulp/gulpconfig.js

npm run deploy

Запуск сборки проекта и создание zip архива с именем проекта. (без запуска локальконо сервера)

npm run zip

Запуск сборки проекта но без создания webp картинок. (без запуска сервера, только финальная сборка)

npm run devbuild

Запуск создания SVG спрайта.

Иконки нужно положить в папку src/svgicons, готовый спрайт появится в папке src/img/icons/icons.svg Изменения в папке src/svgicons не отслеживаются в dev режиме, при необходимости можно запустить повтоврую сборку спрайта запускать создание спрайта стоит перед началом работ командой:

npm run sprite

Основные файлы для работы с шаблоном:

js/app.js scss/style.scss

index.pug - главная страница файлы pug/includes/*.pug - подключаемые части

Используются псевдонимы пути к папкам:

@img = src/img @scss = src/scss @js = src/js

Плагин для VS Code - Path Autocomplete Настройки. Нажать в реждакторе F1, найти настройки Settings JSON, добавить код: "path-autocomplete.pathMappings": { "@img": "${folder}/src/img", // псевдоним для папки img "@scss": "${folder}/src/scss", // псевдоним для папки scss "@js": "${folder}/src/js", // псевдоним для папки js }

При возникновении ошибок убедитесь что:

1. У вас установлен Node.js последней версии
2. Терминал открыт с правами администратора
3. В названиях папок на всем пути к проекту нет символа # или !
4. Папки и файлы должны быть названы латиницей без пробелов
5. Тег img и его содержимое должны быть записаны в одну строку без переносов
6. В атрибуте src должен быть указан путь к существующей картинке

Прочие проблемы и их решения:

Ошибка "unable to resolve dependency tree"

Решение:

npm i --legacy-peer-deps

Ошибка node-sass.

Решения:

npm rebuild node-sass

и/или

npm install sass gulp-sass --save-dev

Ошибка Pyton

Решение:

npm install --global windows-build-tools