npm - 通过 package.json 将视觉样式应用到在 npm 脚本中使用的 echo 命令

Question

最近用 npm 组装了一个构建工具和 package.json脚本，我有几个 echo命令来说明管道的哪些部分当前正在运行。

例如(来自我的 package.json ):

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

当我重击时: npm run clean它打印我的 echo消息，然后清理相应的目录。

我想改变颜色、字体粗细、背景文字颜色来制作这些 echo陈述脱颖而出，一目了然，信息量更大，但我什至很难找到一个起点，让我无法做到这一点。

有很多关于在常规 CLI/Bash 脚本中执行此操作的信息，通过 grunt和 gulp ，或通过 JS 脚本，但我没有发现从 package.json 的脚本部分尝试它.

我错过了什么？所有帮助表示赞赏。

非常感谢。

Answer 1

控制台/终端通常为 ANSI/VT100 Control sequences 提供支持，因此可以使用这些代码来控制字体颜色、字体粗细、背景颜色等。

对于仅 Bash 的解决方案，请参阅下面的 Bash(MacOS/Linux/等)部分。

但是，如果需要跨平台支持，请遵循下面跨平台部分中描述的解决方案。

Bash (MacOS/Linux/等..)

重要提示:以下在非 bash 控制台上无法成功运行，例如 Windows 命令提示符(即 cmd.exe)或 PowerShell。

下面这个示例 npm-script:

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

...在运行 npm run clean 时，将在您的控制台中记录如下内容(即蓝色背景的白色文本):



必要的语法/代码分解:

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

进一步的例子:

以下示例 npm-scripts 提供了更多示例:

"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 log 少一点):



可以在本文顶部提供的链接中找到更全面的代码列表(或参见下面跨平台部分中列出的代码)，但请记住，并非所有 ANSI/VT100 控制序列都受支持。

跨平台

对于跨平台解决方案(可以成功与 Bash、Windows 命令提示符/cmd.exe 和 PowerShell 等配合使用的解决方案)，您需要创建一个 nodejs 实用程序脚本来处理日志记录。然后可以通过您的 npm-scripts 调用此 nodejs 脚本.

以下步骤描述了如何实现这一点:

创建一个 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 所在的同一文件夹中被储存了。

然后，根据您的示例，让我们添加一个 npm-script至 package.json如下:

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

运行时 npm run clean在使用仅限 bash 的解决方案时，您将看到与以前相同的消息记录到您的控制台，即带有蓝色背景的白色文本。

调用使用语法概述 echo.js通过 npm-scripts

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

node echo \"message\"
node echo \"message\"部分是强制性的。 message是您输入要记录的消息的位置，并且必须用转义的双引号括起来 \"...\"以防止 split 。

其余部分用于格式化/样式设置，都是可选的，可以按任何顺序定义。但是，使用时，它们必须在初始 node echo \"message\" 之后继续。部分，并由一个空格分隔。

[ --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选项完全。

[ --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        │
└─────────────────────────┘

[ --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分别在必要时使您的代码更具可读性。