@wnp/cli NPM | npm.io

Whynotpack-cli

Утилита для управления сборщиком Whynotpack.

Установка

Данный пакет нужно установить глобально, для того что бы можно было удобно управлять каждым проектом.

Для установки используйте команду:

npm install -g @wnp/cli

Доступные команды

wnp init

Данная команда разворачивает wnp в текущую папку, и устанавливает нужные для работы зависимости.

wnp dev

Данная команда запускает webpack-dev-server, с текущим проектом, который будет доступен по адресу http://localhost:3000 по умолчанию.

wnp build

Данная команда компилирует весь проект в папку build, на выходе вы получаете html страницы, минифицированные css и js файлы, с map файлами для удобного дебагинга, и конечно же папку assets с контентом.

wnp add-component

Данная команда создаёт новый компонент по пути app/components, компонент состоит из трёх файлов:

- component.hbs (handlebars файл)

- component.js (JavaScript файл)

- component.scss (стилевой файл)

А так же автоматически импортирует стилевой файл компонента в главный стилевой файл.

wnp add-page

Данная команда создаёт новую страницу (handlebars файл) по пути app/pages и регистрирует её в конфиг файл. Так же перезапускает webpack-dev-server, что бы webpack начал обрабатывать новую страницу.

wnp deploy

Данная команда публицирует вашу build папку на в ваш репозиторий, на ветку gh-pages, если вы предварительно указали url вашего репозитория в файле package.json. Если вы не указывали адрес вашего репозитория, wnp попросит вас указать адрес и выполнит команду.

wnp help

Данная команда отображает список доступных команд.

Whynotpack

Это простой и удобный сборщик верстки, стилей и JavaScript модулей.

WNP - базируется на webpack, использует удобный шаблонизатор handlebars, поддерживает возможность вставлять инлайновые SVG посредством шорткодов.

Введение

Шаблонизатор handlebars обрабатывает файлы с расширением .hbs, в папках:

- app/pages

- app/components

- app/core/helpers

Компоненты handlebars

Компоненты импортируются посредством шорткода {{> componentFolder/componentName}} например:

Если в папке app/components находится папка с компонентом test, то импортировать данный компонент можно в любой .hbs файл, посредством шорткода {{> test/test}}

Хелперы handlebars

Хелперы или помощники, помогают переиспользовать повторяющиеся куски кода, и могут быть импортированы в любой .hbs файл, посредством шорткода {{>helperName}} . Папку с хелперами - handlebars обрабатывает по пути app/core/helpers.

Инлайновые SVG

В любом из .hbs вы можете вставить SVG иконку, посредством шорткода {{>icon src="iconName.svg"}} где iconName является названием SVG файла который вы хотите импортировать. Иконки находятся по пути app/assets/icons.

Картинки в html

Для картинок так же существует хелпер (шорткод) для того что бы вставить картинку в любой .hbs файл, достаточно импортировать его посредством шорткода {{>image src="imageName.ext"}} Где imageName название файла и .ext расширение файла (png, jpg, svg, webp, и.т.д.) Handlebars обрабатывает картинки по пути app/assets/images.

Фавиконки

В wnp подключение фавиконок так же является хелпером. И менять что то в самом файле нет необходимости. Если вы хотите заменить фавиконку вашего проекта, воспользуйтесь сервисом Фавикон генератор

Выберите png картинку, загрузите в сервис, и вы получите архив с готовыми картинками. Переместите их по пути - app/assets/favicons