我掌握了少数人才知道持续集成系统的日志密码

例如：

 
 
 

  
  
  
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 `${value}` 
  
  
  
} 
  
  
  
 
  
  
  
function bgCode(value, color) { 
  
  
  
    return `${value}` 
  
  
  
} 
  
  
  
 
  
  
  
function singleCode(value) { 
  
  
  
    return `${value}` 
  
  
  
} 
 
 
 

使用示例如下：

 
 
 

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

部署实战

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

 
 
 

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

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

 
 
 

  
  
  
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。

 
 
 

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

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

参考

https://www.twilio.com/blog/guide-node-js-logging

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

https://en.wikipedia.org/wiki/ANSI_escape_code#Colors

https://stackoverflow.com/questions/4842424/list-of-ansi-color-escape-sequences

https://stackoverflow.com/questions/15011478/ansi-questions-x1b25h-and-x1be

https://bluesock.org/~willg/dev/ansi.html

https://www.cnblogs.com/gamesky/archive/2012/07/28/2613264.html

https://github.com/mmalecki/ansiparse

分享文章：我掌握了少数人才知道持续集成系统的日志密码
链接地址：http://www.36103.cn/qtweb/news45/12345.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联