Ungic packer - среда разработки веб верстальщика

# Начало работы

Ungic является npm пакетом (opens new window) который следует установить глобально с помощью npm install ungic -g команды, а затем выбрать один из следующих путей:

# Создание нового проекта

Для того, чтобы создать новый проект достаточно перейти в корень будущего рабочего каталога и вызвать команду ungic create myProject

Где myProject - имя вашего проекта.

# Внедрение в существующий проект

Обратите внимание!

При инициализации ungic происходит генерация директорий и файлов нового проекта! Во избежание конфликта, рекомендуется прежде ознакомиться со структурой ungic проекта.

Выполните ungic init команду из вашей рабочей директории!

TIP

Рекомендуется инициализировать ungic после инициализации npm:

> npm init
> ungic init

После создания ungic проекта, одним из выше перечисленных способов, появится конфигурационный файл ungic.config.json, а также будет подготовлена структура для будущего проекта.

TIP

В случае удаления рабочих директорий ungic проекта, они будут восстановлены при следующем запуске проекта. При этом, для запуска ungic проекта достаточно иметь один конфигурационный файл ungic.config.json

# Запуск проекта

Для того, чтобы начать разработку, нужно запустить проект с помощью команды ungic run из рабочей директории проекта в которой располагается конфигурационный файл ungic.config.json.

Что дальше? По умолчанию, ungic генерирует следующую структуру проекта:

# Структура проекта

.
├─ ungic.config.json
├─ source
|  ├─ assets
│  ├─ icons
│  ├─ scss
│  └─ pages
└─ dist
   ├─ fonts
   ├─ img
   └─ css

Все, что необходимо, это перейти в рабочую директорию source выбрать директорию соответствующую вашим требованиям и начать работу с файлами. Все исходные файлы моментально будут собраны в dist директорию.

# Установка демонстрационного проекта.

После того, как был запущен ungic проект с помощью команды ungic run, в консоли становится доступно CLI меню!

TIP

Для того, чтобы понять какие команды нам доступны, вы можете обратиться к соответствующему разделу или ввести любой символ для вызовы предупреждения со списком всех существующих команд активного меню. Для ознакомления с основными командами ungiс, необходимо воспользоваться командой ungic --help до запуска проекта.

ungic other: ?

------- System: CLI -------
| Unknown argument: ?
---------------------------
ungic other: index.js [command]

Commands:
  index.js exit         Exit from application
  index.js back         Back to main menu
  index.js demo         Get started with demo project
  index.js boilerplate  Get started with boilerplate
  index.js bootstrap    Get started with bootstrap

После первого запуска проекта, будет предложено установить demo проект

> ungic run
------- Success: Status -------
| test app running at: http://127.0.0.1:2020
-------------------------------
? Do you want to install one of the demo projects to get started? (Y/n)

а также, можно использовать demo команду в other меню

ungic: other
ungic other: demo
------- Log -------
| Copying and processing files in progress, please wait
-------------------
------- System: CLI -------
| Done! All files have been successfully added to your source directory and precompiled
---------------------------

После чего, смело перейдите в source директорию для ознакомления с демо файлами.

# Установка bootstrap demo проекта.

Для установки демонстрационного проекта следует перейти в меню other, а затем использовать команду bootstrap.

# Локальный сервер

После запуска проекта ungic, dist директория является публичной директорией проекта и доступна в браузере, по умолчанию сервер стартует по адресу http://127.0.0.1:2020. Быстрая разработка в ungic является одной из приоритетных задач, поэтому результат выполняемой работы моментально отображается в браузере с ленивой подгрузкой затрагиваемых файлов.

TIP

Для запуска сервера на другом порту, передайте его параметром после команды run:
ungic run 9090

TIP

Для того, чтобы открыть файл из dist директории в браузере достаточно воспользоваться командой open <url> из главного CLI меню проекта. Обратите внимание, url следует указывать относительно dist директории.

← Процесс разработки →