CLI Menu | Ungic packer - development environment for web layout

The CLI menu becomes available immediately after starting the project using the ungic run command

D:\myProject>ungic run --no-o -l

Log output to console enabled. You can disable this option using the "log false" command.
------- System -------
| myProject app running at: http://127.0.0.1:2020
----------------------
ungic:|

TIP

-o (--open) the parameter responsible for opening the start page in the browser after starting the project.
-l (--log) the parameter is responsible for outputting logs to the console, useful for seeing what is happening.

# Get help

After entering any character or invalid command, a hint about existing commands will be displayed

ungic: ?

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

Commands:
  index.js exit                                   Exit from application
  index.js release <release_name> [build_name]    Build a full release
  index.js info                                   Info about current project
  index.js open [url]                             Open url of project in Browser
  index.js log <status>                           Log output to the console
  index.js html                                   switch to html menu
  index.js icons                                  switch to icons menu
  index.js other                                  switch to other menu
  index.js scss                                   switch to scss menu
ungic:

To get information about global ungic commands, use the --help parameter

D:\myProject>ungic --help
index.js [command]

Commands:
  index.js init           Initialize an ungic project to an existing NPM project
                          directory
  index.js create <name>  Create new a project
  index.js run [port]     Launch current ungic project

Options:
  --help      Show help                                                [boolean]
  --version   Show version number                                      [boolean]
  --verbose   Run with verbose logging                [boolean] [default: false]
  --log, -l   Enable log output to console            [boolean] [default: false]
  --mode, -m  Providing the mode configuration. Manipulates NODE_ENV environment
              variable.

# Go back

To go back, use the command back

# Exiting the project

To exit ungic project, use the command exit

# Basic ungic commands

# init

Options:
- --help, Boolean - display a hint
- --version, Boolean - display the current version of ungic
- --log, -l, Boolean, Default: false - enable output of logs to the console
- --mode, -m, String - development mode development|production, see config documentation
- --verbose - detailed logging
Using: ungic init

Initialize a ** ungic ** project in an existing project. See documentation (russian only)

# create

Arguments:
- name, String - project name
Options:
- --help, Boolean - display a hint
- --version, Boolean - display the current version of ungic
- --log, -l, Boolean, Default: false - enable output of logs to the console
- --mode, -m, String - development mode development|production, see config documentation
- --verbose - detailed logging

Using: ungic create <name>

Create a new project. See documentation (russian only)

# run

Arguments:
- port, Number, Default: 2020 - port for the local server.
Options:
- --help, Boolean - display a hint
- --version, Boolean - display the current version of ungic
- --open, -o Boolean, Default: true - open the start page in a browser.
- --log, -l, Boolean, Default: false - enable output of logs to the console
- --mode, -m, String - development mode development|production, see config documentation
- --verbose - detailed logging
Using: ungic run [port]

Create a new project.. See documentation (russian only)

TIP

If the port is busy, the server will start on the next free port!

Commands:

# release

Arguments:
- release_name Required *, String - release name
- build_name String build_name = release_name || "default" - build config name.
Options:
- --version, -v, String - release version

Using: release <release_name> [build_name]

Generation of a general release based on HTML documents.

The release configuration is specified in the build.releases section of the configuration file.

...
"build": {
    "releases": {
      // Config for a release with "default" build_name.      
      "default": {
        "saveAllAssets": true,
        "host": "",
        "noConflict": true,
        "urlsOptimization": true,
        "scssBuildName": "default",
        "htmlBuildName": "default",
        "iconsBuildName": "default",
        "includeOnlyUsedComponents": false,
        "combineIcons": true,
        "combineScssComponents": true
      }
    }
    ...

For more information, refer to this section of config documentation.

# info

Using:

Getting information about the current project.

# open

Arguments:
- url, String - a relative path to the file from the dist directory. By default is /.

Using: open [url]

Open the path relative to the dist directory in the browser under the local domain name of the project.

// Structure of the dist directory
.
├─ css
├─ js
├─ img
├─ fonts
├─ demo.html
└─ demo-icons.html


ungic: open demo-icons // to open a page with project icons in a browser

TIP

.html extension of html files can be omitted.

# log

Arguments:
- status Required *, Boolean, Default: false - switch log display mode
Using: log <status>

Log into the console

# html

Using:

Go to the html plugin menu.

# icons

Using:

Go to the icons plugin menu.

# scss

Using:

Go to the scss plugin menu.

# other

Using:

Go to the other menu.

SCSS Plugin Menu

To go to the SCSS plugin menu from the main menu, use the scss command

ungic: scss
ungic scss:

Commands:

# dev

Parameters:
- inverse boolean - Enable/Disable inverse mode
- autoprefixer boolean - Enable/Disable autoprefixer plugin
- defaultInverse boolean - Switch defaultInverse mode
- direction string - ltr or rtl
- oppositeDirection boolean
- theme string - Switch project theme (The name of the theme that is available in your project)
Using: dev --inverse

Modify build configuration in development mode and rebuild all components, does not affect the config file. This command can change the project theme or inversion mode without reloading the project.

# create

Arguments:
- cid Required *, String - component name
Using: create <cid>

Create a new component

# remove

Using: remove <cid>
Arguments:
- cid Required *, String - component name
Remove a component

# release

Arguments:
- release_name Required *, String - release name
- build_name, String - build config name
Options:
- --version, -v, String - release version
Using: release <release_name> [build_name]

Generate a css release from a set of sass components.

# components

Using:

Outputs a list of all sass components to the console

# unwatch

Using:

Disable file watching

# watch

Using:

Enable file watching

HTML Plugin Menu

To go to the HTML plugin menu from the main menu, use the html command

ungic: html
ungic html:

Commands:

# valid

Arguments:
- path Required *, String - relative path from the dist directory to the generated html page.
Using: valid <path>

Checks the validity of a HTML5 document and generates a report.

# amp_valid

Arguments:
- path Required *, String - relative path from the dist directory to the generated html page.
Using: amp_valid <path>

Checks the validity of the AMP (opens new window) document and generates a report.

# pretty

Arguments:
- path Required *, String - relative path from the dist directory to the generated html page.
Using: pretty <path>

Converts html page to readable form (Places spaces / tabs).

# compress

Arguments:
- path Required *, String - relative path from the dist directory to the generated html page.
Using: compress <path>

Minify html

# create

Arguments:
- name Required *, String - the name of the page without the .html extension.
Using: create <name>

Creation of a new page with preliminary configuration.

# remove

Arguments:
- name Required *, String - the name of the page without the .html extension.
Using: remove <name>

Delete a page

# pages

Using:

Outputs a list of all html pages to the console

# unwatch

Using:

Disable file watching

# watch

Using:

Enable file watching

*Icons plugin menu

To go to the icons plugin menu from the main menu, use the icons command

ungic: icons
ungic icons:

Commands:

# export

Arguments:
- path, String - the relative path from the dist/exports directory to the output file
Options:
- --ids, -i, array - Ids of icons
Using: export [path]

Exporting SVG icons in JSON file.

TIP

Exported SVG icons can be included in any ungic projects using the import command

Usage example:
```
ungic icons: export icons.json -i svg_cloud svg_gamepad_filled
```

# import

Arguments:
- path, String - the relative path from the dist directory to the output JSON file.
Options:
- --save, -s, Boolean - Create physically SVG files in the source/icons directory. By default, it creates a file if it is not exists.
Using: import [path]

Imports ungic icons from the exported JSON file.

# icons

Arguments:
- type, String - filter by type (may be svg or image). Outputs both types by default.

Using: icons [type]

Outputs a lists of all icons in the format: [type] sourcename, name, ID, path

ungic icons: icons
------- System: Icons list -------
| [SVG] sourcename: boots, name: boots, ID: svg_boots, path: svg\boots.svg

# search

Parameters:
- path String - Search relative to the path from source/icons directory to file
- name String - Search relative to the name of icon
- id String - Search relative to the icon ID
- sourcename String - Search relative to the source name of icon

Using: search --name boots

Search icon(s) and get information about it(them).

ungic icons: search --name boots

------- System: CLI -------
| 1 icons found for your request
---------------------------

------- System: Icons list -------
| [SVG] sourcename: boots, name: boots, ID: svg_boots, path: svg\boots.svg
----------------------------------

# svgmode

Arguments:

mode, String Default: fonts - mode, fonts or svgSprite

Using: svgmode [mode]

Switch mode of generation SVG icons in development mode

Without passing an argument, outputs the active mode.

# release

Using: release <release_name> [build_name]

Arguments:

release_name Required *, String - release name
build_name, String - build config name

Options:

--version, -v, String - release version

Generate a release of icons

# unwatch

Disable file watching

# watch

Enable file watching

# demo

Install demo project

# boilerplate

Install boilerplate template

# bootstrap

Install bootstrap project

# CLI Menu

# Menu navigation

# Get help

# Go back

# Exiting the project

# Basic ungic commands

# init

# create

# run

# Main menu

# release

# info

# open

# log

# html

# icons

# scss

# other

# SCSS menu

# dev

# create

# remove

# release

# components

# unwatch

# watch

# HTML menu

# valid

# amp_valid

# pretty

# compress

# create

# remove

# pages

# unwatch

# watch

# ICONS menu

# export

# import

# icons

# search

# svgmode

# release

# unwatch

# watch

# Other menu

# demo

# boilerplate

# bootstrap