Примените визуальный стиль к командам echo, используемым в скриптах npm через package.json - PullRequest
Новая
       57

Примените визуальный стиль к командам echo, используемым в скриптах npm через package.json

0 голосов
/ 08 мая 2018

Недавно собрали инструмент сборки со сценариями npm и package.json, и у меня есть несколько команд echo, чтобы указать, какие части конвейера в данный момент выполняются.

Например (из моего package.json): 

{
    "scripts": {
        "clean": "rimraf a-directory/",
        "preclean": "echo \"\n[ Cleaning build directories ]\n\""
    }
}

Когда я Bash: npm run clean, он печатает мое сообщение echo, а затем очищает соответствующий каталог.

Я бы хотел изменить цвет, вес шрифта и цвет фона текста, чтобы эти echo операторы выделялись и были более информативными, но я изо всех сил пытался даже найти отправную точку, которая могла бы меня оттолкнуть. в состоянии сделать это.

Существует много информации об этом в обычных скриптах CLI / Bash, через grunt и gulp или через скрипты JS, но я ничего не нашел, пытаясь сделать это из раздела скриптов package.json.

Что мне не хватает? Вся помощь оценена.

Большое спасибо.

1 Ответ

0 голосов
/ 10 мая 2018

Консоли / терминалы обычно обеспечивают поддержку Последовательности управления ANSI / VT100 , поэтому можно использовать эти коды для управления цветом шрифта, весом шрифта, цветом фона и т. Д.

  • Решение только для Bash см. В разделе Bash (MacOS / Linux / etc.) ниже.

  • Однако, если поддержка кроссплатформенностизатем следуйте решению, описанному в разделе Cross Platform ниже.

Bash (MacOS / Linux / и т. Д.)

Важное примечание: Следующее не будет успешно работать на не-bashКонсоли, такие как Командная строка Windows (т.е. cmd.exe) или PowerShell .

Этот пример npm-скрипта ниже: 

"scripts": {
  "clean": "rimraf a-directory/",
  "preclean": "echo \"\\x1b[104m\\x1b[97m\n[ Cleaning build directories ]\n\\x1b[0m\""
}

... запустит что-то вроде следующего в вашей консоли при запуске npm run clean (т.е. белый текст с синим фоном):

enter image description here

Разбивка необходимого синтаксиса / кодов: 

            <Esc> characters
   ┌─────────┬────┴─────────┐
   │         │              │
 ┌─┴─┐     ┌─┴─┐          ┌─┴─┐
 \\x1b[104m\\x1b[97m Mssg \\x1b[0m
      └─┬─┘     └─┬┘└─┬─┘      └┬┘
        │         │   │         │
        │         │   │         │
        │         │   │         │
        │         │   │  Reset all attributes
        │         │   │
        │         │  Your Message
        │         │
        │       White Text
        │       
 Light blue background

Дополнительные примеры:

В следующих примерах npm-скрипты предоставляют дополнительные примеры: 

"scripts": {
  "a": "echo \"\\x1b[1m\\x1b[39mBold Text\\x1b[0m\"",
  "b": "echo \"\\x1b[91mLight Red Text\\x1b[0m\"",
  "c": "echo \"\\x1b[94mLight Blue Text\\x1b[0m\"",
  "d": "echo \"\\x1b[92mLight Green Text\\x1b[0m\"",
  "e": "echo \"\\x1b[4m\\x1b[91mLight Red Underlined Text\\x1b[0m\"",
  "f": "echo \"\\x1b[101m\\x1b[97mLight Red Background and White Text\\x1b[0m\"",
  "g": "echo \"\\x1b[104m\\x1b[97mLight Blue Background and White Text\\x1b[0m\"",
  "h": "echo \"\\x1b[30m\\x1b[103mLight Yellow Background and Black Text\\x1b[0m\"",
  "i": "echo \"\\x1b[97m\\x1b[100mDark Gray Background and White Text\\x1b[0m\"",
  "bash-echo-all": "npm run a -s && npm run b -s && npm run c -s && npm run d -s && npm run e -s && npm run f -s && npm run g -s && npm run h -s && npm run i -s"
},

Запуск npm run bash-echo-all -s с использованиемПриведенные выше сценарии выведут на вашу консоль следующее (опция -s просто делает журнал npm немного меньше):

enter image description here

Более полный списоккодов можно найти по ссылке, приведенной в верхней части этого поста (или см. коды, перечисленные в разделе Cross Platform ниже), но помните, что нетподдерживаются все последовательности управления ANSI / VT100.

Кроссплатформенный

Для кроссплатформенного решения (то, которое успешно работает с Bash , Командная строка Windows / cmd.exe и PowerShell и т. Д.) Вам потребуется создать служебный сценарий nodejs для ведения журнала.Этот скрипт nodejs можно затем запустить с помощью npm-scripts.

. Следующие шаги описывают, как этого можно достичь:

  1. Создайте служебный скрипт nodejs следующим образом:

    echo.js 

    const args = process.argv;    
const mssg = args[2];

const opts = [
  '-s', '--set',
  '-b', '--bg-color',
  '-f', '--font-color'];

function excapeAnsiCode(code) {
  return '\x1b[' + code + 'm';
}

const ansiStyles = opts.map(function (opt) {
  return args.indexOf(opt) > -1
      ? excapeAnsiCode(args[args.indexOf(opt) +1])
      : '';
});

console.log('%s%s%s', ansiStyles.join(''), mssg, '\x1b[0m');

    Давайте назовем файл echo.js и сохраним его в корневом каталоге вашего проекта, то есть в той же папке, где package.jsonсохраняется.

  2. Затем, учитывая ваш пример, давайте добавим npm-script к package.json следующим образом: 

    "scripts": {
  "clean": "rimraf a-directory/",
  "preclean": "node echo \"[ Cleaning build directories ]\" --bg-color 104 --font-color 97"
}

    При запуске npm run clean you 'Вы увидите то же сообщение, зарегистрированное на вашей консоли, как и раньше, при использовании решения bash only, т.е. белый текст с синим фоном.

    enter image description here

Обзор синтаксиса использования для вызова echo.js через npm-scripts

node echo \"message\" [[-s|--set] number] [[-b|--bg-color] number] [[-f|--font-color] number]

  1. node echo \"message\"

    Часть node echo \"message\" обязательна.message - это место, где вы вводите свое сообщение для регистрации, и оно должно быть заключено в экранированные двойные кавычки \"...\", чтобы предотвратить разбиение.

    Остальные части, которые предназначены для этой целиформатирования / стилизации, все являются необязательными и могут быть определены в любом порядке.Однако при использовании они должны идти после начальной части node echo \"message\" и отделяться одним пробелом.

  2. [--set|-s]

    Параметр --set или его сокращенный эквивалент -s, за которым следует один пробел, и один из следующих кодов ANSI можно использовать для задания общего форматирования: 

    ┌─────────────────────────┐
│ Code  Description       │
├─────────────────────────┤
│  1    Bold/Bright       │
│  2    Dim               │
│  4    Underlined        │
│  5    Blink             │
│  7    Reverse/invert    │
│  8    Hidden            │
└─────────────────────────┘

    Примечание : коды 1 и 4 успешно работали с Bash , однако они не поддерживались Командная строка Windows и Powershell .Поэтому, если повторяемость важна для разных платформ, я рекомендую полностью избегать использования опции --set | -s.

  3. [--bg-color|-b]

    Параметр --bg-color или его сокращенный эквивалент -b, за которым следует один пробел, и один из следующих кодов ANSI можно использовать для указания цвета фона: 

    ┌─────────────────────────┐
│ Code  Background Color  │
├─────────────────────────┤
│  49   Default           │
│  40   Black             │
│  41   Red               │
│  42   Green             │
│  43   Yellow            │
│  44   Blue              │
│  45   Magenta           │
│  46   Cyan              │
│  47   Light Gray        │
│  100  Dark Gray         │
│  101  Light Red         │
│  102  Light Green       │
│  103  Light Yellow      │
│  104  Light Blue        │
│  105  Light Magenta     │
│  106  Light Cyan        │
│  107  White Cyan        │
└─────────────────────────┘

  4. [--font-color|-f]

    Параметр --font-color или его сокращенный эквивалент -f, за которым следует один пробел, и один из следующих кодов ANSI можно использовать для указания цвета шрифта: 

    ┌─────────────────────────┐
│ Code  Font Color        │
├─────────────────────────┤
│  39   Default           │
│  30   Black             │
│  31   Red               │
│  32   Green             │
│  33   Yellow            │
│  34   Blue              │
│  35   Magenta           │
│  36   Cyan              │
│  37   Light Gray        │
│  90   Dark Gray         │
│  91   Light Red         │
│  92   Light Green       │
│  93   Light Yellow      │
│  94   Light Blue        │
│  95   Light Magenta     │
│  96   Light Cyan        │
│  97   White Cyan        │
└─────────────────────────┘

Дополнительные примеры:

Следующие примеры сценариев предоставляют дополнительные примеры: 

"scripts": {
  "r": "node echo \"Bold Text\" -s 1",
  "s": "node echo \"Light Red Text\" -f 91",
  "t": "node echo \"Light Blue Text\" -f 94",
  "u": "node echo \"Light Green Text\" -f 92",
  "v": "node echo \"Light Red Underlined Text\" -s 4 -f 91",
  "w": "node echo \"Light Red Background and White Text\" -b 101 -f 97",
  "x": "node echo \"Light Blue Background and White Text\" -b 104 -f 97",
  "y": "node echo \"Light Yellow Background and Black Text\" -f 30 -b 103",
  "z": "node echo \"Dark Gray Background and White Text\" -b 100 -f 97",
  "node-echo-all": "npm run r -s && npm run s -s && npm run t -s && npm run u -s && npm run v -s && npm run w -s && npm run x -s && npm run y -s && npm run z -s"
},

Запуск npm run node-echo-all -s с использованием приведенных выше сценариев приведет к тем же результатам, что и в разделе Bash (MacOS / Linux / etc ..) выше.

Для краткости в этих сценариях (см. Выше) используются сокращения -s, -b и -f. Однако они могут быть заменены их длинными эквивалентами --set, --bg-color и --font-color соответственно, если необходимо, чтобы сделать ваш код более читабельным.

...