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

Question

最近将构建工具与 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.

的脚本部分

我错过了什么？感谢所有帮助。

非常感谢。

Answer 1

Consoles/terminals通常为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（即蓝色背景的白色文本）时，将在您的控制台中记录如下内容：

必要的细分syntax/codes：

            <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 日志少一点）：

可以在此 post 顶部提供的 link 中找到更全面的代码列表（或查看 跨平台[=170= 中列出的代码] 部分），但请记住并非所有 ANSI/VT100 控制序列都受支持。

跨平台

对于跨平台解决方案，（与 Bash、Windows 命令提示符/[=209 一起成功运行的解决方案=] 和 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 解决方案时相同的消息记录到您的控制台，即带有蓝色背景的白色文本。

通过npm-scripts
调用echo.js的使用语法概述
node echo \"message\" [[-s|--set] number] [[-b|--bg-color] number] [[-f|--font-color] number]

node echo \"message\"

node echo \"message\" 部分是强制性的。 message 是您输入要记录的消息的地方，它必须包含在转义双引号 \"...\" 中以防止拆分。

其余部分，即formatting/styling的目的，都是可选的，可以按任何顺序定义。但是，在使用时，它们必须在初始 node echo \"message\" 部分之后继续，并由单个 space.
分隔
[--set|-s]

--set 选项，或者它的 shorthand 等效项 -s，后跟单个 space，并且可以使用以下 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 选项，或者它的 shorthand 等价物 -b，后跟单个 space，并且可以使用以下 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 选项，或者它的 shorthand 等价物 -f，后跟单个 space，并且可以使用以下 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..） 上面的部分。

为简洁起见，这些脚本（以上）使用 shorthand、-s、-b 和 -f 选项。但是，如有必要，可以将它们分别替换为普通的等价物 --set、--bg-color 和 --font-color，以使您的代码更具可读性。

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

Apply visual styling to echo commands used in npm scripts via package.json

build-tools

echo

npm

package.json

npm-scripts

Bash（MacOS/Linux/等..）

必要的细分syntax/codes：

更多示例：

跨平台

通过`npm-scripts`

更多示例：

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

Apply visual styling to echo commands used in npm scripts via package.json

build-tools

echo

npm

package.json

npm-scripts

Bash（MacOS/Linux/等..）

必要的细分syntax/codes：

更多示例：

跨平台

通过npm-scripts

更多示例：

通过`npm-scripts`