我掌握了少数人才知道持续集成系统的日志密码-阿里云开发者社区

前言

前段时间在使用 Travis CI 的时候发现它的部署日志包含了很多带色彩的日志。

并且我们知道，在使用命令行终端的时候也会出现这些可爱的色彩。

当然我不是为了吹它而吹它，它是有实际的作用的，能够帮助我们快速定位问题！

对此我就产生了好奇，Travis CI 是怎么把这些彩色日志搬到浏览器的？

我猜想肯定不是通过对关键字词特征识别来做的，因为那样太 low 了。

进行了查询后，查到了一个终于查到了关键词，它就是 ANSI escape sequences。

ANSI转义序列是带内信令的标准，用于控制终端和终端仿真器上的光标位置，颜色和一些其他选项。--维基百科

通俗地讲，就是那些在终端输出彩色的文字中包含了一些转义序列字符，只不过我们看不到，被终端进行了解析。然后终端将这些字符解析成了我们现在看到的形形色色多彩的日志（包括一些颜色、下划线、粗体等）。

例如，我们在终端进行npm 的安装，git 分支的切换，包括运行报错的时候都能看到。

正是有了这些色彩，让我们的调试工作效率大大提高，一眼便能看到哪些命令出错了，以及如何解决的方案。

现在我们要做的就是如何将这些色彩日志输出到浏览器端。而进行这个步骤之前，我们得先知道，这些ANSI转义序列的形态是什么样子的？

根据wiki我们可以知道 ANSI 转义序列可以操作很多功能，例如光标位置、颜色、下划线和其他选项。下面我们就 颜色部分 来进行讲解。

ANSI 转义序列

ANSI 转义序列也是跟随着终端的发展而发展，颜色的规范也是随着设备的不同有所区别。例如在早期的设备只支持 3 / 4 Bit ，支持的颜色分别为 8 / 16 种。

ANSI 转义序列大多数以 ESC 和'['开头嵌入到文本中，终端会查找并解释为命令，而不是字符串。

ESC 的 ANSI 值为 27 ，8进制表示为 \033 ，16进制表示为 \u001B。

3/4 bit

原始规格只有 8/16 种颜色。

比如ESC[30;47m 它是以 ESC[ 开头 m 结束，中间为code码，以分号进行分割。

color 取值为30-37，background 取值为 40-47。例如 :

echo -e "\u001B[31m hello"

（如果想要清除颜色就需要使用 ESC [39;49m（某些终端不支持）或者ESC[0m ）

后来的终端增加了直接指定 90-97 和 100-107 的“明亮”颜色的能力。

效果如下：

以下是其色彩对照表：

8-bit

后来由于256色在显卡上很常见，因此添加了转义序列以从预定义的256种颜色中进行选择，也就是说在原来的书写方式上增加了新的一位来代表更多的颜色。

ESC[ 38;5;<n> m // 设置字体颜色
ESC[ 48;5;<n> m // 设置背景颜色
    0-7:  standard colors (as in ESC [ 30–37 m)
    8-15:  high intensity colors (as in ESC [ 90–97 m)
    16-231:  6 × 6 × 6 cube (216 colors): 16 + 36 × r + 6 × g + b (0 ≤ r, g, b ≤ 5)
   232-255:  grayscale from black to white in 24 steps

在支持更多色彩的终端中，例如:

echo -e "\u001B[38;5;11m hello"

代表输出黄色字体。

echo -e "\u001B[48;5;14;38;5;13m hello"

代表输出蓝色背景，粉红色字体。

以下是其色彩对照表：

24-bit

再往后发展就是支持 24 位真彩的显卡，Xterm， KDE 的Konsole，以及所有基于 libvte 的终端（包括GNOME终端）支持24位前景和背景颜色设置。

ESC[ 38;2;<r>;<g>;<b>m // 前景色
ESC[ 48;2;<r>;<g>;<b>m // 背景色

例如：

echo -e "\u001B[38;2;100;228;75m hello"

输出绿色的字体代表 rgb(100,228,75)。

解析工具

我们知道了转义的规范后，那么我们需要将 ANSI 字符进行解析。

由于规范比较多，因此我们先调研一下在 js 中常用的色彩库，来进行一个小小的探索。

由于 3 / 4bit 的兼容性更好，大多数工具(如chalk)会采用这 8 / 16 色来做高亮，因此我们先实现一个 8 / 16 色的解析。

这里参考了 ansiparse 这个解析库：

核心思路为：

const ansiparse = require('ansiparse')
const ansiStr = "\u001B[34mHello \u001B[39m World \u001B[31m! \u001B[39m"
const json = ansiparse(ansiStr)
console.log(json)
// json输出如下：
[
  { foreground: 'blue', text: 'Hello ' },
  { text: ' World ' },
  { foreground: 'red', text: '! ' }
]

然后我们可以写一个函数来遍历上面解析得到的 JSON数组，输出 HTML。

function createHtml(ansiList, wrap = '') {
    let html = '';
    for (let i = 0; i < ansiList.length; i++) {
        const htmlFrame = ansiList[i];
        const {background = '', text, foreground = ''} = htmlFrame;
        if(background && foreground) {
            if(text.includes('\n')) {
                html += wrap;
                continue;
            }
            html += fontBgCode(text, foreground, background);
            continue;
        }
        if (background || foreground) {
            const color = background ? `bg-${background}` : foreground;
            let textColor = bgCode(text, color);
            textColor = textColor.replace(/\n/g, wrap);
            html += textColor;
            continue;
        }
        if (text.includes('\n')) {
            const textColor = text.replace(/\n/g, wrap);
            html += textColor;
            continue;
        }
        html += singleCode(text);
    }
    html += ''
    return html;
}
function fontBgCode(value, color, bgColor) {
    return `<span class="${color} bg-${bgColor}">${value}</span>`
}
function bgCode(value, color) {
    return `<span class="${color}">${value}</span>`
}
function singleCode(value) {
    return `<span>${value}</span>`
}

使用示例如下：

const str = "\u001B[34mHello \u001B[39m World \u001B[31m! \u001B[39m";
console.log(createHtml(parseAnsi(str)));
// <span class="blue">Hello</span><span> World</span><span class="red">!</span>

部署实战

有了上面的部分我们就来用一个简单的demo实际演示一下部署日志吧！

// 项目目录结构
demo
 |- package.json
 |- index.html
 |- webpack.config.js
 |- /src
   |- index.js
index.js
build.sh

我们在 index.js 中启动一个 build 脚本，来模拟一下我们真实的部署场景。

// index.js
const { spawn } = require('child_process');
const cmd = spawn('sh', ['build.sh']);
cmd.stdout.on('data', (data) => {
  console.log(`stdout: ${data}`);
});
cmd.stderr.on('data', (data) => {
  console.log(`stderr: ${data}`);
});
cmd.on('close', (code) => {
  console.log(`child process exited with code ${code}`);
});

// build.sh
cd demo
npx webpack

我们在终端尝试一下，控制台输入 node index.js

发现在输出的日志中，并没有看到对应的色彩。

为什么从 child_process 为什么无法输出色彩，而我们如果在终端中直接打包项目却能够输出色彩呢？

Why？

第一反应就是去查找根源，也就是使用频率最高的几个色彩输出的库。

以简单的方式给控制台的输出标记颜色。

https://github.com/Marak/colors.js

https://github.com/chalk/chalk

在看了webpack-cli的源码后，查到它是用了colorette作为色彩输出库的。

那么我们就来查看一下colorette的源码一探究竟。

在入口文件的开头就看到一个变量isColorSupported来判断是否支持色彩输出。

https://github.com/jorgebucaran/colorette/blob/main/index.js#L17

// colorette/index.js
import * as tty from "tty"
const env = process.env || {}
const argv = process.argv || []
const isDisabled = "NO_COLOR" in env || argv.includes("--no-color")
const isForced = "FORCE_COLOR" in env || argv.includes("--color")
const isWindows = process.platform === "win32"
const isCompatibleTerminal = tty && tty.isatty && tty.isatty(1) && env.TERM && env.TERM !== "dumb"
const isCI = "CI" in env && ("GITHUB_ACTIONS" in env || "GITLAB_CI" in env || "CIRCLECI" in env)
export const isColorSupported = !isDisabled && (isForced || isWindows || isCompatibleTerminal || isCI)

可以看到这种工具判断了很多条件，来对我们的输出流进行处理。

在以上条件成立下，才会输出 ANSI 日志。在不满足以上情况的条件下，就会切换输出更容易解析的方式。

const isWindows = process.platform === "win32"

参考：https://stackoverflow.com/questions/8683895/how-do-i-determine-the-current-operating-system-with-node-js

dumb: "哑终端"

哑终端指不能执行诸如“删行”、“清屏”或“控制光标位置”的一些特殊ANSI转义序列的计算机终端

参考：https://zh.wikipedia.org/wiki/%E5%93%91%E7%BB%88%E7%AB%AF

也就是说我们的 child_process 的输出流关闭了终端模式(TTY)，上面的四种情况都不满足。所以我们得不到带有 ANSI 的色彩日志。

How？

我们可以显示传入环境变量 FORCE_COLOR=1 或者命令带上参数 --color 强制启动颜色来解决这个问题。

这样我们就拿到了带有 ANSI 颜色信息的输出文本，最终解析得到 HTML。

<div>asset <span class="green">main.js</span><span> 132 bytes </span><span class="yellow">[compared for emit]</span><span> </span><span class="green">[minimized]</span> (name: main)</div><div><span>./src/index.js</span><span> 289 bytes </span><span class="yellow">[built]</span><span> </span><span class="yellow">[code generated]</span></div><div></div><div><span class="yellow">WARNING</span><span> in </span>configuration</div><div>The <span class="red">'mode' option has not been set</span>, webpack will fallback to 'production' for this value.</div><div><span class="green">Set 'mode' option to 'development' or 'production'</span> to enable defaults for each environment.</div><div>You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/</div><div></div><div>webpack 5.53.0 compiled with <span class="yellow">1 warning</span> in 201 ms</div><div></div>

然后就可以在浏览器中展示我们彩色的输出日志了，与在终端里输出的一致。