学习搭建一个自己的 vue 脚手架 清空终端控制台 二

旺仔米苏
430 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第26天，点击查看活动详情

十四、清空终端控制台 二

引言

这里开始新的学习系列，动手搭建一个属于自己的 vue 脚手架

主要以 vue 官方的 vue cli 作为参考和学习

方便自己在后续创建 vue 项目时，不必总是复制粘贴

清空终端控制台

上一节，我们学习了关于 node 与 终端 TTY 产生联系的 两个方法

这一节，我们来完成 清空终端信息

首先 在 lib 文件夹下，创建一个 utils 文件夹，用于放置公共代码，在这里再创建一个 logger.js 文件，用于处理终端信息，导出 clearConsole 方法

const clearConsole = (title) => {
  if (process.stdout.isTTY) {
    console.log(process.stdout.rows)
    const blank = '\n'.repeat(process.stdout.rows)
    console.log(blank)
  }
}

module.exports = {
  clearConsole
}

上面的 这段代码 '\n'.repeat(process.stdout.rows) 的意思，就是创建与控制台一样树的空行

它的作用为了后边清空做操作

之后在 lib\core\action\create.js 引入使用

  if (fs.existsSync(targetDir)) {
    if (options.force) {
      await fs.remove(targetDir)
    } else {
    }
  } else {
    clearConsole('wzms-cli')
  }

image.png

可以看到效果很不错，但是还差点，光标在下方，只要把上面的空格全部去掉，就可以了！

分析

但是这还不够，我们需要

  • 将刚刚所 产生的空行 给删除

  • 并且将光标所在的行，放到 行首

  • 最后清除多余空格

为了更方便直观的看到结果，这里将终端行数，缩短到 7行 ，如下图

image.png

加上我们输入的命令行，其实我们的数据有 8行 数据，再加上会产生一个新的命令行，总共是 9行

1 命令行1
2 \n 1
3 \n 2
4 \n 3
5 \n 4
6 \n 5
7 \n 6
8 \n 7
9 命令行2

将 第9行 的数据，与行首进行调换位置（与其说调换位置，不妨说是覆盖 更准确！）

那么得到的结果为

1 命令行1
2 \n 1
3 命令行2
4 \n 3
5 \n 4
6 \n 5
7 \n 6
8 \n 7
9 \n 2

完成

接下来位置为： lib\utils\logger.js 处理我们的 clearConsole 这个方法的代码

const clearConsole = (title) => {
  if (process.stdout.isTTY) {
    const blank = '\n'.repeat(process.stdout.rows)
    console.log(blank)

    // 改变命令行上的光变位置，将其 移动光标到行首，并且是覆盖
    readline.cursorTo(process.stdout, 0, 0)
    // 让命令行从当前行开始，到最后一行结束，将这两行之间所有内容清除。
    readline.clearScreenDown(process.stdout)
  }
}

这样我们就成功的解决了 清空终端控制台信息 的操作

疑问

但是别急，你往上翻滚，会发现

image.png

为什么是两个空格呢？

因为 console.log(blank) 会增加一个空行

你可以在 终端 输出一下 console.log('\n')

就明白了！

总结

好了，这里我们终于将 终端控制台 给清除了，中途遇到好多小的知识点。现在离我们 cli 越来越近了！

avatar
文章
阅读
粉丝