@webtechart/frodo NPM

frodo - консольная утилита для взаимодействия с frontend.

Установка

Устанавливается frodo как обычный npm-пакет, только глобально, чтобы был доступен отовсюду.

sudo npm i -g @webtechart/frodo

Поиск пути

По умолчанию frodo работает только в папке /frontend/, но можно добавить возможность запуска из любой папки проекта - в этом случае frodo пытается сам найти папку /frontend/.

Для этого в .workspace_config сайта добавляем:

path_to_frontend %path%

%path% - путь до папки /frontend/ относительно корня сайта

Также можно проверить, где лежит папка /frontend/, которую использует frodo (в консоль выведется абсолютный путь к папке):

frodo path_to_frontend

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

Установка tao-webpack

frodo init [type]

type - beta, webgl, master. По умолчанию - master.

Подробнее про типы: master - текущая стабильная beta - beta предстоящего релиза новой мажорной версии webgl - базируется на webpack v1 и содержит небольшой комплект заготовок по работе с webgl.

Выполняет установку tao-webpack. Клонирует репозиторий https://github.com/techart/frontend-blank frontend-blank, ставит модули, дописывает .gitignore, .workspace_config, .userSettings.js и прочие мелочи.

Установка доп. модулей

frodo install [type]

type - тип установки, возможные значения: main, local.

По дефолту выполняет local.

main - ставит глобально webpack, babel-cli

local - выполняет npm run pkg.

Значение pkg указано в package.json в "scripts": "yarn install".

Сборка

Команды frodo для сборки представляют собой алиасы для npm run.

Запуск сборки

frodo build [env] [flags]

env - dev, prod. По умолчанию dev.

Собирает frontend для окружения env.

Во время сборки создается файл хеша папки /frontend/. Если сохраненный хеш и текущий совпадают - пересборка не произойдет, а сообщение об этом выведется в консоль. Для обхода есть флаг:

-f - Принудительно запускает сборку

Сводная таблица по командам

Примечание: Не закрывайте консоль после запуска режимов dev (с watch) или hot - эти скрипты должны отслеживать изменения в режиме реального времени, поэтому не убивайте их. :)

Запуск вотчера

frodo watch

Запуск hot-режима

frodo hot

Генератор блоков

frodo create block <name> [flags]

name можно указывать в формате category/name - в этом случае создастся папка (если её нет) src/block/category, в которой создастся файл подключения контекста category.js, а внутри сам блок name.

Если же name задается без category, то блок с именем name создастся в папке frоntend/src/block/common/. По умолчанию (без флагов) создается шаблон и файл стилей.

Флаги

-s - добавляет файл стилей
-j - добавляет скрипт
-t - добавляет шаблон
-S - не добавлять стили
-T - не добавлять шаблон
-J - не добавлять скрипт
-f - принудительное добавление. (!!!) содержимое файлов перезапишется

Удобно тем, что файлы создаются не пустые, а с заготовками кода. И это быстрее, чем вручную: с помощью команды 'frodo create block test -j' можно буквально за секунду создать папку test с созданными файлами-заготовками test.html.twig, test.js и test.scss.

Форматирование стилей

frodo format

Форматирует scss файлы проекта в соответствии с настройками линтера .stylelintrc

Обновление tao-webpack

frodo update [flags]

Обновит библиотечные файлы в папке frontend.

На данный момент обновление производится в пределах текущей мажорной версии используемой библиотеки. Если существует более свежая мажорная версия, то нужно явно указывать её номер.

Если были правки ключевых файлов, то делаются их бэкапы - они лежат рядом с актуальными файлами, имеют постфикс .back.

Флаги

-f - принудительное обновление (обновление будет даже на текущую версию)
-s - дополнительно обновит блок scripts в package.json
-v - обновление tao-webpack до указанной версии (в пределах мажорной версии), где может быть в следующих форматах:
1.2.3 - обновление на указанную версию
1.1 - обновление на последний патч в миноре
1 - обновление на последний минор и патч