К содержимому
--:--
местное время
EVS.CODER / navigation

Навигация

На связи

TelegramGitHubLinkedIn

CLI / FRONTEND STARTER

Fe Starter Bricks

Генератор проектов для многостраничных сайтов, CMS-тем, Symfony-шаблонов и email-вёрстки. Выбор технологий и готовая сборка через командную строку.

  • Node.js
  • Gulp 4
  • Webpack 5
  • TypeScript
  • SCSS
  • MJML
Исходный код на GitHub
Иллюстрация интерактивного CLI Fe Starter Bricks

01 / CONTEXT

Быстрый старт для шаблонной вёрстки

Новый проект требует настройки шаблонов, стилей, скриптов и обработки ассетов. Fe Starter Bricks собирает основу из общего базового шаблона и выбранных технологических слоёв. Такой подход подходит для статических сайтов и интеграции frontend-вёрстки в CMS или Symfony.

02 / WORKFLOW

От команды до локального сервера

  1. Запустить генератор. Команда npm create starter-bricks@latest запускает интерактивную настройку.
  2. Выбрать основу. Указать имя папки, выбрать Pug, Nunjucks или Twig, включить TypeScript или оставить JavaScript и при необходимости добавить MJML-письма.
  3. Запустить разработку. Перейти в созданную папку, выполнить npm install и npm start. BrowserSync обслуживает локальный сайт и обновляет страницу при изменениях.
  4. Собрать результат. npm run build запускает production-сборку шаблонов, стилей, скриптов и ассетов.
Иллюстрация выбора Twig, Pug или Nunjucks в CLI
Оформленная иллюстрация выбора движка шаблонов на основе реального интерфейса CLI.

03 / ENGINEERING

Общая база и независимые слои

Составной шаблон

CLI копирует базовую структуру, добавляет выбранный движок шаблонов, слой JavaScript или TypeScript и опциональные email-шаблоны. Настройки записываются в user.config.js, имя проекта — в package.json.

Gulp и Webpack

Gulp отвечает за шаблоны, копирование файлов и обработку изображений. Webpack собирает скрипты и стили; SCSS и PostCSS дополняются поддержкой Tailwind CSS.

Ассеты и письма

В шаблоне предусмотрены оптимизация изображений, SVG- и PNG-спрайты и сборка MJML-писем. Возможности включаются через конфигурацию проекта.

Проверка ввода

Генератор проверяет имя папки, запрещает пути и зарезервированные имена Windows и не записывает проект в непустую папку.

Иллюстрация результата генерации проекта с TypeScript и MJML
Оформленная иллюстрация этапов генерации и команд для запуска проекта.
← Все проекты