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

Posted 2023-03-07

技术标签:

【中文标题】通过 package.json 将视觉样式应用于 npm 脚本中使用的回显命令【英文标题】：Apply visual styling to echo commands used in npm scripts via package.json 【发布时间】：2018-10-17 23:29:31 【问题描述】：

最近用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】：

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

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

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

Bash（MacOS/Linux/ 等）

重要提示：以下将无法在非 bash 控制台上成功运行，例如 Windows 命令提示符（即 cmd.exe）或 PowerShell em>。

下面这个例子 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

跨平台

对于跨平台解决方案，（与 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 解决方案时相同的消息记录到控制台，即带有蓝色背景的白色文本。

通过`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 是您输入要记录的消息的地方，它必须用转义的双引号 \"...\" 括起来以防止拆分。

用于格式化/样式的其余部分都是可选的，可以按任意顺序定义。但是，在使用时，它们必须在最初的 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 命令提示符 和 不支持它们em>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        │
└─────────────────────────┘

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

Bash（MacOS/Linux/ 等）

必要的语法/代码分解：

更多示例：

跨平台

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

更多示例：

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

Bash（MacOS/Linux/ 等）

必要的语法/代码分解：

更多示例：

跨平台

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

更多示例：

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