自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

我掌握了少數(shù)人才知道持續(xù)集成系統(tǒng)的日志密碼

作者： 楠溪
安全 應(yīng)用安全
前段時(shí)間在使用 Travis CI 的時(shí)候發(fā)現(xiàn)它的部署日志包含了很多帶色彩的日志。

[[429062]]

前言

前段時(shí)間在使用 Travis CI 的時(shí)候發(fā)現(xiàn)它的部署日志包含了很多帶色彩的日志。

并且我們知道，在使用命令行終端的時(shí)候也會出現(xiàn)這些可愛的色彩。

當(dāng)然我不是為了吹它而吹它，它是有實(shí)際的作用的，能夠幫助我們快速定位問題!

對此我就產(chǎn)生了好奇，Travis CI 是怎么把這些彩色日志搬到瀏覽器的?

我猜想肯定不是通過對關(guān)鍵字詞特征識別來做的，因?yàn)槟菢犹?low 了。

進(jìn)行了查詢后，查到了一個(gè)終于查到了關(guān)鍵詞，它就是 ANSI escape sequences。

ANSI轉(zhuǎn)義序列是帶內(nèi)信令的標(biāo)準(zhǔn)，用于控制終端和終端仿真器上的光標(biāo)位置，顏色和一些其他選項(xiàng)。--維基百科

通俗地講，就是那些在終端輸出彩色的文字中包含了一些轉(zhuǎn)義序列字符，只不過我們看不到，被終端進(jìn)行了解析。然后終端將這些字符解析成了我們現(xiàn)在看到的形形色色多彩的日志(包括一些顏色、下劃線、粗體等)。

例如，我們在終端進(jìn)行npm 的安裝，git 分支的切換，包括運(yùn)行報(bào)錯的時(shí)候都能看到。

正是有了這些色彩，讓我們的調(diào)試工作效率大大提高，一眼便能看到哪些命令出錯了，以及如何解決的方案。

現(xiàn)在我們要做的就是如何將這些色彩日志輸出到瀏覽器端。而進(jìn)行這個(gè)步驟之前，我們得先知道，這些ANSI轉(zhuǎn)義序列的形態(tài)是什么樣子的?

根據(jù)wiki我們可以知道 ANSI 轉(zhuǎn)義序列可以操作很多功能，例如光標(biāo)位置、顏色、下劃線和其他選項(xiàng)。下面我們就 顏色部分 來進(jìn)行講解。

ANSI 轉(zhuǎn)義序列

ANSI 轉(zhuǎn)義序列 也是跟隨著終端的發(fā)展而發(fā)展，顏色的規(guī)范也是隨著設(shè)備的不同有所區(qū)別。例如在早期的設(shè)備只支持 3 / 4 Bit ，支持的顏色分別為 8 / 16 種。

ANSI 轉(zhuǎn)義序列大多數(shù)以 ESC 和'['開頭嵌入到文本中，終端會查找并解釋為命令，而不是字符串。

ESC 的 ANSI 值為 27 ，8進(jìn)制表示為 \033 ，16進(jìn)制表示為 \u001B。

3/4 bit

原始規(guī)格只有 8/16 種顏色。

比如ESC[30;47m 它是以 ESC[ 開頭 m 結(jié)束，中間為code碼，以分號進(jìn)行分割。

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

  1. echo -e "\u001B[31m hello" 

(如果想要清除顏色就需要使用 ESC [39;49m(某些終端不支持) 或者ESC[0m )

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

效果如下：

以下是其色彩對照表：

8-bit

后來由于256色在顯卡上很常見，因此添加了轉(zhuǎn)義序列以從預(yù)定義的256種顏色中進(jìn)行選擇，也就是說在原來的書寫方式上增加了新的一位來代表更多的顏色。

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

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

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

代表輸出黃色字體。

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

代表輸出藍(lán)色背景，粉紅色字體。

以下是其色彩對照表：

24-bit

再往后發(fā)展就是支持 24 位真彩的顯卡，Xterm， KDE 的Konsole，以及所有基于 libvte 的終端(包括GNOME終端)支持24位前景和背景顏色設(shè)置。

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

例如：

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

輸出綠色的字體代表 rgb(100,228,75)。

解析工具

我們知道了轉(zhuǎn)義的規(guī)范后，那么我們需要將 ANSI 字符進(jìn)行解析。

由于規(guī)范比較多，因此我們先調(diào)研一下在 js 中常用的色彩庫，來進(jìn)行一個(gè)小小的探索。

由于 3 / 4bit 的兼容性更好，大多數(shù)工具(如chalk)會采用這 8 / 16 色來做高亮，因此我們先實(shí)現(xiàn)一個(gè) 8 / 16 色的解析。

這里參考了 ansiparse 這個(gè)解析庫：

核心思路為：

  1. const ansiparse = require('ansiparse') 
  2.  
  3. const ansiStr = "\u001B[34mHello \u001B[39m World \u001B[31m! \u001B[39m" 
  4.  
  5. const json = ansiparse(ansiStr) 
  6. console.log(json) 
  7.  
  8. // json輸出如下： 
  9. [ 
  10.   { foreground: 'blue', text: 'Hello ' }, 
  11.   { text: ' World ' }, 
  12.   { foreground: 'red', text: '! ' } 
  13. ] 

然后我們可以寫一個(gè)函數(shù)來遍歷上面解析得到的 JSON數(shù)組，輸出 HTML。

  1. function createHtml(ansiList, wrap = '') { 
  2.     let html = ''; 
  3.     for (let i = 0; i < ansiList.length; i++) { 
  4.         const htmlFrame = ansiList[i]; 
  5.  
  6.         const {background = '', text, foreground = ''} = htmlFrame; 
  7.         if(background && foreground) { 
  8.             if(text.includes('\n')) { 
  9.                 html += wrap; 
  10.                 continue; 
  11.             } 
  12.             html += fontBgCode(text, foreground, background); 
  13.             continue; 
  14.         } 
  15.         if (background || foreground) { 
  16.             const color = background ? `bg-${background}` : foreground; 
  17.             let textColor = bgCode(text, color); 
  18.  
  19.             textColor = textColor.replace(/\n/g, wrap); 
  20.              
  21.             html += textColor; 
  22.             continue; 
  23.         } 
  24.         if (text.includes('\n')) { 
  25.             const textColor = text.replace(/\n/g, wrap); 
  26.             html += textColor; 
  27.             continue; 
  28.         } 
  29.         html += singleCode(text); 
  30.     } 
  31.     html += '' 
  32.     return html; 
  33. } 
  34.  
  35. function fontBgCode(value, color, bgColor) { 
  36.     return `<span class="${color} bg-${bgColor}">${value}</span>` 
  37. } 
  38.  
  39. function bgCode(value, color) { 
  40.     return `<span class="${color}">${value}</span>` 
  41. } 
  42.  
  43. function singleCode(value) { 
  44.     return `<span>${value}</span>` 
  45. } 

使用示例如下：

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

部署實(shí)戰(zhàn)

有了上面的部分我們就來用一個(gè)簡單的demo實(shí)際演示一下部署日志吧!

  1. // 項(xiàng)目目錄結(jié)構(gòu) 
  2. demo 
  3.  |- package.json 
  4.  |- index.html 
  5.  |- webpack.config.js 
  6.  |- /src 
  7.    |- index.js 
  8. index.js 
  9. build.sh 

我們在 index.js 中啟動一個(gè) build 腳本，來模擬一下我們真實(shí)的部署場景。

  1. const { spawn } = require('child_process'); 
  2. const cmd = spawn('sh', ['build.sh']); 
  3.  
  4. cmd.stdout.on('data', (data) => { 
  5.   console.log(`stdout: ${data}`); 
  6. }); 
  7.  
  8. cmd.stderr.on('data', (data) => { 
  9.   console.log(`stderr: ${data}`); 
  10. }); 
  11.  
  12. cmd.on('close', (code) => { 
  13.   console.log(`child process exited with code ${code}`); 
  14. }); 
  15. // build.sh 
  16.  
  17. cd demo 
  18.  
  19. npx webpack 

我們在終端嘗試一下，控制臺輸入 node index.js

發(fā)現(xiàn)在輸出的日志中，并沒有看到對應(yīng)的色彩。

為什么從 child_process 為什么無法輸出色彩，而我們?nèi)绻诮K端中直接打包項(xiàng)目卻能夠輸出色彩呢?

Why?

第一反應(yīng)就是去查找根源，也就是使用頻率最高的幾個(gè)色彩輸出的庫。

以簡單的方式給控制臺的輸出標(biāo)記顏色。

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

https://github.com/chalk/chalk

在看了webpack-cli的源碼后，查到它是用了colorette作為色彩輸出庫的。

那么我們就來查看一下colorette的源碼一探究竟。

在入口文件的開頭就看到一個(gè)變量isColorSupported來判斷是否支持色彩輸出。

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

  1. // colorette/index.js 
  2. import * as tty from "tty" 
  3.  
  4. const env = process.env || {} 
  5. const argv = process.argv || [] 
  6.  
  7. const isDisabled = "NO_COLOR" in env || argv.includes("--no-color") 
  8.  
  9. const isForced = "FORCE_COLOR" in env || argv.includes("--color") 
  10. const isWindows = process.platform === "win32" 
  11. const isCompatibleTerminal = tty && tty.isatty && tty.isatty(1) && env.TERM && env.TERM !== "dumb" 
  12. const isCI = "CI" in env && ("GITHUB_ACTIONS" in env || "GITLAB_CI" in env || "CIRCLECI" in env) 
  13.  
  14. export const isColorSupported = !isDisabled && (isForced || isWindows || isCompatibleTerminal || isCI) 

可以看到這種工具判斷了很多條件，來對我們的輸出流進(jìn)行處理。

在以上條件成立下，才會輸出 ANSI 日志。在不滿足以上情況的條件下，就會切換輸出更容易解析的方式。

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

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

dumb: "啞終端"

啞終端指不能執(zhí)行諸如“刪行”、“清屏”或“控制光標(biāo)位置”的一些特殊ANSI轉(zhuǎn)義序列的計(jì)算機(jī)終端

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

也就是說我們的 child_process 的輸出流關(guān)閉了終端模式(TTY)，上面的四種情況都不滿足。所以我們得不到帶有 ANSI 的色彩日志。

How?

我們可以顯示傳入環(huán)境變量 FORCE_COLOR=1 或者命令帶上參數(shù) --color 強(qiáng)制啟動顏色來解決這個(gè)問題。

這樣我們就拿到了帶有 ANSI 顏色信息的輸出文本，最終解析得到 HTML。

  1. <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> 

然后就可以在瀏覽器中展示我們彩色的輸出日志了，與在終端里輸出的一致。

參考

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

 

責(zé)任編輯：武曉燕 來源： 秋風(fēng)的筆記
技術(shù)
相關(guān)推薦

2025-02-12 08:27:49

CSS選擇器ID

2012-11-20 09:57:14

2016-08-05 17:19:37

持續(xù)集成持續(xù)交付系統(tǒng)運(yùn)維

2017-02-27 18:35:23

集成交付部署

2023-03-19 11:47:57

Taro小程序持續(xù)集

2017-10-19 09:47:55

容器化微服務(wù)集成

2021-03-31 09:00:00

管道集成工具

2015-09-29 10:08:26

DockerJava持續(xù)集成

2019-04-18 10:35:30

持續(xù)集成工具Buddy

2015-09-24 09:43:08

阮一峰持續(xù)集成

2015-07-22 14:59:30

OpenStac持續(xù)集成持續(xù)交付

2023-09-15 09:27:35

英偉達(dá)

2009-06-14 18:05:58

ibmdwWebSphere

2015-07-27 11:32:24

Docker持續(xù)集成Docker部署

2021-09-03 11:33:38

Jenkins 微服務(wù)集成

2017-03-01 08:56:28

VSTSTFSiOS

2012-02-23 10:22:03

JavaTeamCity

2018-01-08 14:18:14

代碼互聯(lián)網(wǎng)持續(xù)集成

2011-09-15 09:21:46

持續(xù)集成

2021-06-18 09:00:00

云計(jì)算開發(fā)存儲庫
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號