Установка шаблона
Прежде всего следует разархивировать zip-архив в вашу папку проекта. Следите за тем, чтобы папка и ее родительские папки не содержали в названии кириллицу, пробелы, символы # и !
Содержимое архива в папке проекта
Если вы до сих пор не использовали NodeJS и пакетный менеджер NPM, необходимо загрузить и установить Node.js . Загружайте версию, рекомендованную для большинства.
Далее открываем терминал в этой папке проекта. Терминал может быть встроен или открыт отдельно от редактора. Рекомендую использовать терминал GIT Bash .
После установки необходимых инструментов введите команду npm i
В процессе установки в терминале могут быть сообщения с пометкой WARN желтым цветом. Эти сообщения можно игнорировать. Но если вы получаете сообщение ERR! красным цветом – это критическая ошибка и ее нужно исправлять.
Предупреждение можно игнорировать
После успешной установки у вас появится папка node_modules и файл package-lock.json
Установка завершена
Подробнее об
архитектуре папок и файлов ЧФ мы поговорим в следующем разделе, а пока продолжаем подготовку к работе
Запуск шаблона и режимы работы
ЧФ4 может выполнять разные сценарии сценариев:
- Режим разработчика. Команда запуска npm run dev
- Режим разработчика с внешним IP. Команда запуска npm run online
- Режим продакшена. Команда запуска npm run build
- Режим просмотра результата выполнения продакшена. Команда запуска npm run preview
- Режим продакшена и отправка результата на сервер по FTP. Команда запуска npm run deploy
- Режим продакшена и отправка результата на GitHub. Команда запуска npm run git
- Режим продакшена и создание ZIP-архива с результатом. Команда запуска npm run zip
- Режим разработчика под CMS WordPress. Команда запуска npm run wp
- Режим продакшен под CMS WordPress. Команда запуска npm run wpbuild
- Остановка сервера Docker. Команда запуска npm run wpstop
Режим разработчика
В режиме разработчика выполняются только необходимые для разработки задачи:
- Конвертация OTF/TTF шрифтов в WOFF2 и подключение к проекту
- Создание иконочного шрифта и подключение к проекту
- Обработка HTML-файлов, переименование псевдонимов
- Проработка препроцессора PUG, переименование псевдонимов
- Обработка JS-файлов
- Обработка SCSS/CSS-файлов
- Запускается локальный сервер, открывается браузер с индексной страницей.
- Запускается наблюдатель за сменой фалов. При каждом изменении файлов браузер обновляет страницу
- Внимание! В режиме разработчика HTML CSS JS файлы результата не записываются на диск ( папка dist не создается ).
Режим продакшена
В режиме продакшена выполняется финализация проекта, а именно:
- Конвертация (при необходимости) OTF/TTF шрифтов в WOFF2 и подключение к проекту
- Конвертация изображений в формат WEBP/AVIF. Создание файлов разных размеров. Сжатие и оптимизация JPG PNG SVG изображений
- Конвертация SCSS файлов в CSS файлы, переименование псевдонимов, группирование медиа-запросов, добавляются вендорные префиксы для обеспечения кроссбраузерности, обрабатывается подключение WEBP/AVIF изображений, производится сжатие. Могут создаваться несжатые копии файлов. Могут создаваться критические стили.
- Обработка и форматирование HTML файлов, переименование псевдонимов, обрабатывается подключение WEBP/AVIF изображений и разных размеров файлов.
- При использовании PUG файлы преобразуются в HTML, переименовываются псевдонимы, обрабатывается подключение WEBP/AVIF изображений и разных размеров файлов.
- Собираются JS файлы, производится сжатие и оптимизация конечного файла. В результате попадает только используемый код. Могут создаваться несжатые копии файлов.
- Копируются файлы из указанной папки
- Внимание! Все файлы с результатом записываются на диск в папку dist , локальный сервер не запускается
Итак, давайте запустим наш шаблон в режиме разработчика, для этого в терминале выполняем команду npm run dev
После запуска система выполнит все задачи разработчика, описанные выше. Результатом работы должна стать открытая страница содержания в браузере.
Внимание! При конвертации шрифтов в терминале будет выведено соответствующее сообщение, пользоваться сборником можно после завершения конвертации
Старт выполнения команды
Команда успешно исполнена
Возможные ошибки и их разрешение
Если браузер не запустился, а в терминале видны ошибки (ERR!), убедитесь что:
- У вас установлены Node.js и Python последней версии
- Терминал открыт с правами администратора
- В названиях папок по всему пути к проекту нет символа # или !
- Папки и файлы должны быть названы латиницей без пробелов.
Подготовка редактора к комфортной работе с шаблоном
Для того чтобы наслаждаться возможностями шаблона ЧФ по полной, нам следует сделать некоторые настройки редактора. В качестве примера представлен редактор VS Code
Настройка псевдонимов
В статье Архитектура шаблона. Файлы и папки вы узнаете, что разные части HTML, SCSS, JS файлов находятся на разных уровнях вложенности, что создает определенные неудобства при подключении, например картинок, в процессе разработки.
Неудобства мы не любим, поэтому настроим так называемые псевдонимы (алиасы) путей к папкам. Для этого нам нужно установить плагин Path Autocomplete .
По умолчанию, ЧФ4 сам настроит плагин соответствующими псевдонимами, указанными в файле настроек сборки. Там же можно отключить автоматическую настройку.
После этого вы можете смело использовать псевдонимы при подключении файлов, например:
<img src="@img/cover.jpg" alt="Рисунок">Редактор распознает псевдоним и выведет список файлов в указанной папке, а во время сборки система сама поменяет псевдоним на нужный путь!
Настройка снипетов
Снипеты – это короткие коды, которые могут вызвать готовые заготовки кода любого объема. Это повышает скорость разработки.
Например, снипет spollers + клавиша Tab выведет код спойлеров:
<div data-fls-spollers class="spollers">
<details class="spollers__item">
<summary class="spollers__title">Заголовок спойлера</summary>
<div class="spollers__body">Контент спойлера</div>
</details>
</div>Конечно, я использовал эту супер возможность в своих чертогах. То есть, построение, например, правильной HTML структуры для того или иного JS модуля, я добавил в снипет.
По умолчанию, ЧФ4 автоматически добавит сборки сборки в ваш проект и вы сможете ими пользоваться во время разработки. Сниппеты ЧФ4 будут работать параллельно с вашими снипетами в редакторе. Автоматическое добавление снипетов можно отключить в настройках сборки.