@0x6368656174/wp-builder

WordPress CLI for fast build modern site

Usage no npm install needed!

<script type="module">
  import 0x6368656174WpBuilder from 'https://cdn.skypack.dev/@0x6368656174/wp-builder';
</script>

README

@0x6368656174/wpbuild

Утилита командной строки для продуктивной работы с WordPress при помощи интеграции с WebPack.

Зачем нужен данная утилита

Утилита пытается решить следующие проблемы разработки на WordPress:

  1. Разделение кода и представления, при помощи twig-шаблонов, в виде интеграции с Timber;
  2. Модульности JavaScript-кода, при помощи Babel и WebPack;
  3. Модульности CSS-кода, при помощи Sass/Scss и использовании БЭМ-методологии;
  4. Использование пакных менеджеров, при помощи интеграции с npm и Composer;
  5. Быстрый старт и развертывание проекта;
  6. Использование литеров, для автоматического контроля и исправления стиля написания кода;
  7. Сборка проекта из исходников и его распространение, для возможности интеграции проекта с CI.

Установка

Для установки, необходимо выполнить команду:

# npm install -g @0x6368656174/wp-builder

Использование

Инициализация нового проекта

Для инициализации нового пустого проекта, необходимо выполнить команду:

# wpbuild init

Структура нового проекта

  • composer/ - каталог со скриптами composer. По-умолчанию, там создается скрипт, который следит за тем, чтоб добавление и обновление пакетов через composer не затирало основные параметры dist/wp-config.php.
  • dist/ - каталог с результатом сборки проекта.
  • dist/vendors/ - каталог с установленными пакетами пакетного менеджера composer. После инициализации проекта в него будет автоматически установлено расширение для использования twig-шаблонов WordPress - Timber.
  • dist/wp-content/ - стандартная папка wp-content из поставки WordPress. Она вынесена отдельно, чтоб она не затиралась, в случае обновления WordPress через composer. В dist/wp-content/название_темы/ будет автоматически собираться тема проекта.
  • dist/.htaccess - файл конфигурации веб-сервера Apache, для работы WordPress из подкаталога wordpress.
  • dist/wordpress/ - каталог автоматической установки WordPress из composer.
  • dist/index.php - переделанный стандартный index.php WordPress для работы его из подкаталога wordpress.
  • dist/wp-config.php - стандартный файл с настройками WordPress. Параметры DB_NAME, DB_USER, DB_PASSWORD, DB_HOST и WP_DEBUG не будут перезатераться при обновлении WordPress через composer.
  • node_modules/ - каталог с установленными пакетами пакетного менеджера npm.
  • src/название_темы/ - каталог с исходниками темы.
  • .editorconfig - файл описания стиля кода для IDE.
  • .eslintrc - файл конфигурации линтера JavaScript - ESLint.
  • .gitignore - файл описания игнорируемых файлов системой контроля версии git.
  • .lintstagedrc - файл описания автоматического применения литеров, при создании коммита в git.
  • .php_cs.dist - файл конфигурации линтера PHP - PHP-CS-Fixer.
  • .prettierrc - файл конфигурации утилиты автоматического форматирования кода Prettier.
  • .stylelintrc - файл конфигурации линтера CSS/Sass/Scss - StyleLint.
  • composer.json - стандартный файл описания проекта пакетного менеджера composer.
  • composer.lock - служебный файл пакетного менеджера composer.
  • wpbuild.json - файл конфигурации проекта. Описание конфигурации смотри ниже.
  • package.json - стандартный файл описания проекта пакетного менеджера npm.
  • tsconfig.json - файл конфигурации TypeScript.
  • tslint.json - файл конфигурации линтера TypeScript - TSLint.

Утилита позволяет разбить проект WordPress (тему), на независимы модули, компонтенты (бллоки), каждый из которых содержит в себе отдельные реализации на PHP, HTML (twig) CSS (так же поддерживаются Sass и Scss), и JavaScript (так же поддерживается TypeScript). Релизации внутри модуля могут быть автономными, а могу быть связаны со смежными модулями. Для CSS части связь реализуется только в вариантах написанных на Sass/Scss, при помощи @import диррективы. Для JavaScript части связь реализуется при помощи ES-модулей.

Утилита собирает все модули в готовый проект, при этом все CSS-части компилируются в несколько оптимизированных CSS-файлов, а JS-части компилируются при помощи Babel или TypeScript в ES6, и собираются в отдельные JS-модули при помощи WebPack.

Принципы организации файлов с исходниками темы

Все файлы с исходниками принято располагать в папке src/название_темы/.

Файлы PHP рекомендуется размещать внутри вложенных папок сгруппированных по назначению. Например, файлы описывающие пользовательские мето-боксы можно разместить в папке src/название_темы/MetaBox. Утилита автоматически настраивает RSR-4 автолоад файлов PHP по их пространству имен. Она создает пространство имен вида название_темы в CamelCase стиле (например для темы test-theme утилита создаст пространство имен TestTheme) и прописывает PSR-4 автолоад для поиска пространства имен темы в папке src/название_темы/. Поэтому для PHP-файлов можно задать пространство имен (nampespace) и потом автоматически их подключать при помощи PSR-4 автолоада. Например для файла описывющего пользовательский мето-бокс для главной страницы Front темы test-theme можно задать пространтсво имен namespaces TestTheme\MetaBox и потом использовать его при помощи PSR-4 автолоада use TestTheme\MetaBox\Front. Важно соблюдать правила именования PSR-4, т.е. название папки должно совпадать с названием пространства имен, а название класса с названием файла.