最近用 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 的脚本部分尝试它.我错过了什么？所有帮助表示赞赏。
非常感谢。
最佳答案
控制台/终端通常为 ANSI/VT100 Control sequences 提供支持，因此可以使用这些代码来控制字体颜色、字体粗细、背景颜色等。
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 脚本.以下步骤描述了如何实现这一点:
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-scriptsnode 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分别在必要时使您的代码更具可读性。
关于npm - 通过 package.json 将视觉样式应用到在 npm 脚本中使用的 echo 命令，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50226385/