通过package.json应用可视样式来回显npm脚本中使用的命令
Gly*_*ith 2 build-tools echo npm package.json npm-scripts
最近有一个构建工具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.
我错过了什么？所有帮助赞赏.
非常感谢.
Rob*_*obC 16
控制台/终端通常支持ANSI/VT100控制序列,因此可以使用这些代码来控制字体颜色,字体粗细,背景颜色等.
有关仅限Bash的解决方案,请参阅下面的Bash(MacOS/Linux/etc ..)部分.
但是,如果需要跨平台支持,请遵循下面的跨平台部分中描述的解决方案.
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日志更少):
可以在本文顶部提供的链接中找到更全面的代码列表(或参见下面跨平台部分中列出的代码),但请记住并非所有ANSI/VT100控制序列都受支持.
跨平台
对于跨平台解决方案(使用Bash,Windows命令提示符/ cmd.exe和PowerShell等成功运行的解决方案),您需要创建一个nodejs实用程序脚本来处理日志记录.然后可以通过您的调用此nodejs脚本npm-scripts.
以下步骤描述了如何实现:
创建nodejs实用程序脚本,如下所示:
echo.js
Run Code Online (Sandbox Code Playgroud)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如下:
Run Code Online (Sandbox Code Playgroud)"scripts": { "clean": "rimraf a-directory/", "preclean": "node echo \"[ Cleaning build directories ]\" --bg-color 104 --font-color 97" }在运行时,
npm run clean您将看到与使用仅bash解决方案时一样的消息记录到您的控制台,即带有蓝色背景的白色文本.
调用echo.jsvia 的用法语法概述npm-scripts
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代码之一可用于指定常规格式:
Run Code Online (Sandbox Code Playgroud)??????????????????????????? ? 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代码之一可用于指定背景颜色:
Run Code Online (Sandbox Code Playgroud)??????????????????????????? ? 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代码之一来指定字体颜色:
Run Code Online (Sandbox Code Playgroud)??????????????????????????? ? 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如果需要,可以分别使您的代码更易于阅读.