通过 package.json 将视觉样式应用于 npm 脚本中使用的 echo 命令
Apply visual styling to echo commands used in npm scripts via package.json
最近将构建工具与 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.
的脚本部分
我错过了什么？感谢所有帮助。
非常感谢。
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，以使您的代码更具可读性。
最近将构建工具与 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.
我错过了什么？感谢所有帮助。
非常感谢。
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实用程序脚本如下：
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，以使您的代码更具可读性。