代码之家  ›  专栏  ›  技术社区  ›  Glynn Smith

通过包将视觉样式应用于npm脚本中使用的echo命令。json

npm-scripts build-tools package.json echo npm
  •  8
  • Glynn Smith  · 技术社区  · 6 年前

    最近将一个构建工具与 npm 和 package.json 脚本,我有一些 echo 用于说明管道的哪些部分当前正在运行的命令。

    例如(从我的 包裹json ): 

    {
    "scripts": {
        "clean": "rimraf a-directory/",
        "preclean": "echo \"\n[ Cleaning build directories ]\n\""
    }
}

    当我猛击时: npm run clean 它打印我的 回响 消息,然后清除相应的目录。

    我想改变颜色、字体大小、背景文字颜色来制作这些 回响 这些陈述很突出,一眼就能知道更多的信息,但我甚至很难找到一个起点,让我能够做到这一点。

    关于在常规CLI/Bash脚本中执行此操作,有很多信息,通过 grunt 和 gulp ,或通过JS脚本,但我在 包裹json 。

    我错过了什么?感谢所有帮助。

    非常感谢。

    1 回复  |  直到 6 年前
        1
  •  33
  •   RobC Manuel Gonzalez    5 年前

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

    • 有关仅限Bash的解决方案,请参阅 Bash(MacOS/Linux/etc…) 下文第节。

    • 但是,如果需要跨平台支持,请遵循 跨平台 下文第节。

    Bash(MacOS/Linux/etc…)

    重要提示: 以下操作无法在非bash控制台上成功运行,例如 Windows命令提示符 (即cmd.exe)或 PowerShell 。

    下面是npm脚本示例: 

    "scripts": {
  "clean": "rimraf a-directory/",
  "preclean": "echo \"\\x1b[104m\\x1b[97m\n[ Cleaning build directories ]\n\\x1b[0m\""
}

    。。。运行时将在控制台中记录如下内容 npm run clean (即背景为蓝色的白色文本):

    enter image description here

    必要语法/代码的分解: 

                <Esc> characters
   ┌─────────┬────┴─────────┐
   │         │              │
 ┌─┴─┐     ┌─┴─┐          ┌─┴─┐
 \\x1b[104m\\x1b[97m Mssg \\x1b[0m
      └─┬─┘     └─┬┘└─┬─┘      └┬┘
        │         │   │         │
        │         │   │         │
        │         │   │         │
        │         │   │  Reset all attributes
        │         │   │
        │         │  Your Message
        │         │
        │       White Text
        │       
 Light blue background

    其他示例:

    以下示例npm脚本提供了更多示例: 

    "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日志稍微少一些):

    enter image description here

    可以在本文顶部提供的链接中找到更全面的代码列表(或参见中列出的代码 跨平台 请记住,并非所有ANSI/VT100控制序列都受支持。

    跨平台

    对于跨平台解决方案 猛击 ,则, Windows命令提示符/cmd。exe文件 和 PowerShell 等等),您需要创建一个nodejs实用程序脚本来处理日志记录。然后可以通过 npm-scripts 。

    以下步骤描述了如何实现这一点:

    1. 创建nodejs实用程序脚本,如下所示:

      回响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 已存储。

    2. 然后,根据您的示例,让我们添加一个 npm-script 到 包裹json 具体如下: 

      "scripts": {
  "clean": "rimraf a-directory/",
  "preclean": "node echo \"[ Cleaning build directories ]\" --bg-color 104 --font-color 97"
}

      运行时 npm运行清理 当使用 猛击 唯一的解决方案,即带有蓝色背景的白色文本。

      enter image description here

    调用的使用语法概述 回响js公司 通过 npm脚本 

    node echo \"message\" [[-s|--set] number] [[-b|--bg-color] number] [[-f|--font-color] number]

    1. node echo \"message\"

      这个 节点回显“消息” 零件是必填的。这个 message 是您输入要记录的消息的位置 必须 用转义双引号括起来 \"...\" 防止分裂。

      其余部分用于设置格式/样式,都是可选的,可以按任何顺序定义。但是,使用时,必须在初始 节点回显“消息” 部分,并由单个空间分隔。

    2. [ --set|-s ]

      这个 --set 选项,或其速记等效项 -s ,后跟一个空格,可以使用以下ANSI代码之一指定常规格式: 

      ┌─────────────────────────┐
│ Code  Description       │
├─────────────────────────┤
│  1    Bold/Bright       │
│  2    Dim               │
│  4    Underlined        │
│  5    Blink             │
│  7    Reverse/invert    │
│  8    Hidden            │
└─────────────────────────┘

      笔记 :代码 1 和 4 已成功使用 猛击 ,但它们不受 Windows命令提示符 和 Powershell 所以,如果重复性在平台间很重要,我建议避免使用 --设置 | -s 完全选择。

    3. [ --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        │
└─────────────────────────┘

    4. [ --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        │
└─────────────────────────┘

    其他示例:

    以下示例脚本提供了更多示例: 

    "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级 选项。然而,它们可以用它们的右手等效物代替 --设置 ,则, --bg颜色 和 --字体颜色 如有必要,请分别使用,以使代码更具可读性。

    推荐文章
    Dasha Kostieva  ·  MODULE_NOT_FOUND’,requireStack:[删除和恢复文件后
    2 年前
    user4681670  ·  创建react应用程序正在中止-未找到ESLINT
    2 年前
    Michał Sadowski  ·  使用npm安装Angular CLI时的EconReset
    6 年前
    batmaniac  ·  在ng build angular中运行严格编译
    6 年前
    Fered  ·  Npm、Dev dependecy或dependecy,当使用webpack等将所有内容打包到一个脚本中时?
    6 年前
    Andy Nguyen  ·  找不到模块“gulp sass”
    6 年前
    Glynn Smith  ·  通过包将视觉样式应用于npm脚本中使用的echo命令。json
    6 年前
    Redtxai  ·  创建一个简单的静态页面,并通过NPM安装和启动[关闭]
    6 年前
    Nicholas Porter  ·  react脚本build then serve提供的是html,而不是main。js文件
    6 年前
    Natalie Perret  ·  如何在WebStorm中调试Angular应用程序?
    6 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号