Введение

Ungic разрабатывался с одной лишь целью - увеличение скорости создания веб шаблонов. Так как, работа с HTML является чуть ли не основной задачей веб верстальщика, для увеличения её продуктивности и увеличения скорости написания HTML разметки были созданы различные инструменты о которых пойдет речь в данном руководстве.

Возможности HTML плагина

• Разделение страниц на части с последующим их включением
  • HTML части
  • текстовые файлы
  • файлы markdown с автоматической компиляцией в html
  • файлы шаблонов с данными
• Шаблонизация с помощью включения файлов шаблонов с данными
  • Поддерживаемые данные
    • JSON
    • YAML
    • QueryString
    • Данные из SASS фреймворка
  • Поддерживаемые шаблонизаторы
    • Handlebars (Основной шаблонизатор)
    • Любой дополнительный (имеется API)
• Интеграция с SASS фреймворком
• Интеграция с Icons плагином
• Проверка валидации HTML страниц, доступны такие проверки как
  • HTML5 validation
  • AMP validation
• Оптимизация документов
  • Оптимизация внутренних JS скриптов
    • Слияние внутренних скриптов
    • Включение внешних локальных скриптов во внутренние
    • Babel js компиляция
    • Сжатие
    • Перемещение в подвал
  • Оптимизация внутренних стилей
    • Поддержка SASS синтаксиса во внутренних стилях
    • Интеграция внутренних стилей с SASS компонентами SCSS плагина
    • Слияние внутренних стилей
    • Постобработка (cleancss, autoprefixer)
    • Включение внешних локальных стилей во внутренние
    • Сжатие
  • Форматирование документа
    • Сжатие
    • Beautify конвертация

Возможно, большинство возможностей являются излишними, поэтому в данном руководстве мы разберем основные методы и случаи, где могут пригодиться те или иные возможности данного инструмента (HTML плагина).

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

Рабочий процесс выглядит следующим образом:

• После запуска ungic проекта, создаем HTML документ в рабочей директории html плагина.

  TIP

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

• начать писать HTML разметку используя весь функционал данного инструмента
• все документы будут собраны в полноценные html страницы, и будут доступны для просмотра в браузере под локальным сервером

  TIP

  Используйте open <path> команду из главного меню проекта, для того, чтобы открыть страницу в браузере под локальным сервером.

• по окончании разработки сгенерировать релиз относительно html страниц(ы)

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

Для работы с документами в реальном времени, все документы в режиме разработки должны быть открыты через локальный сервер проекта, воспользуйтесь командой open <url> в главном меню проекта для открытия вашего документа в браузере!