Установка и запуск шаблона. Подготовка к работе «Чертоги Фрилансера» v3.0.0

Итак, вы скачали шаблон «Чертоги Фрилансера» v3.0.0 (далее ЧФ), какие дальше шаги?

Установка шаблона

Прежде всего следует разархивировать zip-архив в вашу папку проекта. Следите за тем, чтобы папка и ее родительские папки не содержали в названии кириллицу, пробелы, символы # и !

Если вы до сих пор не использовали инструмент GULP, WEBPACK и пакетный менеджер NPM, следует загрузить и установить Node.js . Загружайте версию, рекомендованную для большинства.

Далее открываем терминал в этой папке проекта. Терминал может быть встроен или открыт отдельно от редактора. Рекомендую использовать терминал GIT Bash .

Если вы до сих пор не пользовались инструментом GULP, введите в терминал команду, npm i gulp-cli -g это установит GULP в систему глобально.

После завершения установки GULP введите команду npm i

В процессе установки в терминале могут быть сообщения со значком WARN на желтом фоне.
Эти сообщения можно игнорировать.
Но если вы получаете сообщение ERR!
красным цветом – это критическая ошибка и ее нужно исправлять.

Часто может возникнуть ошибка зависимостей устанавливаемых пакетов (плагинов), и в NPM выше 7 версии это приводит к критической ошибке и остановке установки.

Чтобы устранить эту проблему, выполните команду npm i --legacy-peer-deps, это запустит процесс установки, игнорируя подобные несовместимости.

Помните – версии NodeJS и Python в вашей системе должны быть свежих версий.

После успешной установки у вас появится папка node_modules и файл package-lock.json

Подробнее об архитектуре папок и файлов ЧФ мы поговорим в следующем разделе, а пока продолжаем подготовку к работе

Запуск шаблона и режимы работы

Шаблон «Чертоги Фрилансера» может выполнять несколько сценариев:

Режим разработчика. Команда запуска npm run dev
Режим продакшена. Команда запуска npm run build
Режим продакшена и отправка результата на сервер по FTP. Команда запуска npm run deploy
Режим продакшена и создание ZIP-архива с результатом. Команда запуска npm run zip
Режим продакшен без создания WEBP изображений и действий, связанных с этим форматом. Команда запуска npm run devbuild

Дополнительные команды:

Ручное создание спрейт SVG. Команда запуска npm run sprite
Конвертирование шрифтов с принудительной перезаписью файла стилей. Команда запускаnpm run fonts

Режим разработчика

В режиме разработчика выполняются только необходимые для разработки задачи:

Конвертация шрифтов и запись в файл стилей
Конвертация SCSS файлов в CSS файлы, переименование псевдонимов
Составление HTML файлов, переименование псевдонимов
При использовании PUG, файлы преобразуются в HTML, переименовываются псевдонимы
Собираются JS файлы
Запускается локальный сервер, открывается браузер с индексной страницей.
Запускается наблюдатель за сменой фалов. При каждом изменении файла браузер обновляет страницу (кроме страницы-содержимого)
Копируются файлы из указанной папки
HTML CSS JS файлы результата не записываются на диск ( папка dist не создается )

Если у вас слабый компьютер (мало ОЗУ) или шаблон со временем начинает тормозить, откройте файл
config/webpack.dev.js и раскомментируйте блок :

devMiddleware: {
	writeToDisk: true,
},

Параметр включит создание папки
dist в режиме разработчика, что повышает скорость сборки на слабых ПК.

Режим продакшена

В режиме продакшена выполняется финализация проекта, а именно:

Конвертация шрифтов и запись в файл стилей
Конвертация изображений в формат WEBP. Сжатие и оптимизация JPG PNG SVG картинок
Конвертация SCSS файлов в CSS файлы, переименование псевдонимов, группирование медиа-запросов, добавляются вендорные префиксы для обеспечения кроссбраузерности, обрабатывается подключение WEBP изображений, производится сжатие нежатой копии)
Составление HTML файлов, переименование псевдонимов, обрабатывается подключение WEBP изображений
При использовании PUG, файлы преобразуются в HTML, переименовываются псевдонимы, обрабатывается подключение WEBP изображений
Собираются JS файлы, производится сжатие и оптимизация конечного файла. В результате попадает только используемый код. Итогом задачи будет создание двух файлов: сжатого app.min.js (подключен к HTML) и не сжатого app.js для дальнейшего редактирования другими специалистами.
Копируются файлы из указанной папки
Все файлы с результатом записываются на диск (обычно в папку dist), локальный сервер не запускается

Итак, давайте запустим наш шаблон в режиме разработчика, для этого в терминале выполняем команду npm run dev

После запуска система выполнит все задачи разработчика, описанные выше. Результатом работы должна стать открытая страница содержания в браузере.

Внимание, страница содержания не обновляется автоматически при ее редактировании

Возможные ошибки и их разрешение

Если браузер не запустился, а в терминале видны ошибки (ERR!), убедитесь что:

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

Если ошибка связана с node-sass, запустите команду При ошибке, связанной с Python, запустите команду При ошибке Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: npm rebuild node-sass
npm install -g windows-build-tools

Качаем версию 14.15.1 ( https://nodejs.org/dist/v14.15.1/ ), в Zip архиве.
Заходим в папку с установленным NodeJS, распаковываем содержимое архива в папку с заменой файлов.
Далее идем сюда «Панель управления» => «Система» => «Дополнительные параметры системы» => «Дополнительно» => «Сменные среды»
В Системных переменных «Создать» переменную с именем ‘NODE_SKIP_PLATFORM_CHECK’ и создаем ей значение ‘1’.
Перезапускаем систему и запускаем шаблон согласно инструкции

Подготовка редактора к комфортной работе с шаблоном

Для того чтобы наслаждаться возможностями шаблона ЧФ по полной, нам следует сделать некоторые настройки редактора. В качестве примера представлен редактор VS Code

Настройка псевдонимов

В разделе Архитектура шаблона. Файлы и папки вы узнаете, что разные части HTML/PUG SCSS файлов находятся на разных уровнях вложенности, что создает определенные неудобства при подключении, например картинок, в процессе разработки.

Неудобства мы не любим, поэтому настроим так называемые псевдонимы (алиасы) путей к папкам. Для этого нам нужно установить плагин Path Autocomplete . После установки открываем настройки редактора (settings.json), для этого жмем F1 в редакторе и в строке поиска пишем Open Settings и жмем на ссылку Open Settings (JSON).

В этот файл нужно аккуратно вставить следующий код:

"path-autocomplete.pathMappings": {
	"@img": "${folder}/src/img", // alias for images
	"@scss": "${folder}/src/scss", // alias for scss
	"@js": "${folder}/src/js", // alias for js
}

Очень важно придерживаться синтаксиса JSON, обращайте внимание на запятые:

После этого вы можете смело использовать псевдонимы при подключении файлов, например:

<img src="@img/cover.jpg" alt="Малюнок">

Редактор распознает псевдоним и выведет список файлов в указанной папке, а при сборке система сама поменяет псевдоним на нужный путь!

Настройка снипетов

Снипеты – это короткие коды, которые могут вызвать готовые заготовки кода любого объема. Это повышает скорость разработки.

Конечно, я использовал эту супер возможность в своих чертогах. То есть, построение, например, правильной HTML структуры для того или иного JS модуля, я добавил в СНИПЕТ.

Чтобы добавить набор снипетов из шаблона к себе в редактор, выполняем следующие действия:

Открываем файл snnipets.txt из архива ЧФ и копируем все содержимое
В редакторе VS Code переходим в настройки (шестерня) -> User Snippets ->New Global Snippets File пишем название, например fls, и заменяем содержимое на скопированное из snnipets.txt
При обновлении шаблона и снипетов создавать новый файл не требуется, следует открыть существующее и обновить содержимое