一天一个包——今日份Chalk
发布在前端技术分享2018年12月1日view:375HTML5css3前端开发性能优化前端的畅想前端工程前端工程师
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

终端着色工具包

chalk 是一个可以给终端输出加上色彩的工具包,有了它,你的终端将变得五颜六色,花哨的一匹 :grin:。

GitHub 地址: https://github.com/chalk/chalk

使用起来也非常方便,常规操作 npm 安装 node 包

npm i -D chalk

hello world 如下

const chalk = require('chalk')

console.log(chalk.bold.red('就是这么简单'))

chalk 的颜色 api 还不少,来回组合一下基本足够用了,如果不够用,还可以直接用 hex 或 rgb 来使用百万种真彩色。看下图使用 chalk api 展示的字符串颜色:

从此终端不再是单调的黑和白,而是百万真彩。

chalk 的内部实现挺简单的,终端展示字符串加颜色需要在字符串前后加上一串标识符,各大操作系统的标识符还不一样,chalk 解决了最脏最累的兼容性。

主要 api 如下:

Modifiers
  reset
  bold
  dim
  underline
  inverse
Colors
  hex
  rgb
  black
  red
  green
  yellow
  blue
  magenta
  cyan
  white
  gray
  redBright
  greenBright
  yellowBright
  blueBright
  magentaBright
  cyanBright
  whiteBright
BackgroundColors
  bgBlack
  bgRed
  bgGreen
  bgYellow
  bgBlue
  bgMagenta
  bgCyan
  bgWhite
  bgBlackBright
  bgRedBright
  bgGreenBright
  bgYellowBright
  bgBlueBright
  bgMagentaBright
  bgCyanBright
  bgWhiteBright

以上三种类型可任意组合,而且都是特方便的链式调用。

搭配 mac + item2 + ohmyzsh 视觉效果更佳哟。尤其是在不太懂技术的人面前,简直是装X神器。一年前,公司新来的前端 MM 来跟我讨论问题,我一看机会来了,迅速切出终端,打了一个 gulp 总任务,无数行五彩斑斓的 log 倾泻而下,颇有种黑客帝国的即视感,那妹子顿时被惊艳到了。一年后的今天,我也终于结束了长达一年的单身生活,开始了新一年的单身生活。

无颜色,不输出,chalk,值得拥有 :wink: 本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。 对web开发技术感兴趣的同学,欢迎加入Q群:943129070,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。 最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

评论
发表评论
暂无评论
WRITTEN BY
__小宸__
前端全栈开发工程师 分享一些心得与技术给大家,希望能对大家有所帮助。 欢迎加入前端开发学习交流群:943129070 大家可以一起交流学习
TA的新浪微博
PUBLISHED IN
前端技术分享

分享各种前端开发需要掌握的知识点与观点,欢迎大家一起来讨论

我的收藏