@0x6368656174/wp-builder NPM

@0x6368656174/wpbuild

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

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

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

Разделение кода и представления, при помощи twig-шаблонов, в виде интеграции с Timber;
Модульности JavaScript-кода, при помощи Babel и WebPack;
Модульности CSS-кода, при помощи Sass/Scss и использовании БЭМ-методологии;
Использование пакных менеджеров, при помощи интеграции с npm и Composer;
Быстрый старт и развертывание проекта;
Использование литеров, для автоматического контроля и исправления стиля написания кода;
Сборка проекта из исходников и его распространение, для возможности интеграции проекта с 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, т.е. название папки должно совпадать с названием пространства имен, а название класса с названием файла.