20分钟掌握前端编写 CLI 工具

作者:王高垒

什么是CLI

CLI(command-line interface 命令行界面)是指在图形用户界面得到普及之前使用最为广泛的用户界面,它通常不支持鼠标,用户通过键盘输入指令,计算机接收到指令后,予以执行。也有人称之为字符用户界面(CUI)。

  • 典型的CLI界面:

GUI(Graphical User Interface 图形用户界面)是指采用图形方式显示的计算机操作用户界面。

  • 典型的GUI界面:

Why CLI?

自古软件设计这个武林有两大流派,其中有一个是”CLI“,另外一个是”GUI“。它们一个为了普渡众生,一个为了提高内力,虽然在GUI出现之前,CLI独步武林。但是随着科技的发展,GUI后发致人很快就一统江湖。但是现在谁是天下第一已经不重要了,重点是如何学会用这两种武术提高自己,在合适的情况下用合适的解决方法。下面是我的理解:

作为互联网深度沉迷患者,很多体验是离不开GUI软件的,比如工作邮件,使用foxmail的GUI界面,我可能只需要点几下鼠标敲几下键盘就可以完成一次工作汇报。

但是作为前端资深复制粘贴工程师,也同样离不开CLI工具,在一个项目完成后,我用配置好的自动化软件(比如gulp),我只需要敲一个命令就可以完成上线前的准备。

到这里各位看官应该懂了,

  • CLI更节省计算机资源,提高生产效率。因为不需要处理图形界面,所以开发成本低。适合面对各种geek向的码农。
  • GUI用户学习成本更低,体验更好,生产效率相对较低。开发成本高。适合面对普通互联网用户。

在这里不得不提一下,之前做的基于nw.js的页面检查工具,虽然很厉害,但是启动太慢了加上界面交互浪费了太多精力没有抓住用户的“刚”,所以从效果来说并不是特别好:(

到这里,如果你依旧对前端如何构建一个CLI感兴趣,请跟我一起,10分钟打造一个基于nodejs的CLI工具吧。 在完成一个命令行工具之后,javascript这种浏览器语言,终于完成全产业链(从浏览器到桌面软件再到CMD工具)的试练,成为了武林之巅,也就是世界上最好的语言 :)

开始动手

  • 配置环境

这次我们是基于nodejs来实现一个CLI工具,nodejs环境根据官网的文档一步步说明就好,NPM在公司内部需要配置代理。

  • 初始化项目配置文件 package.json

进入开发目录,执行

npm init

将会创建 package.json和默认的配置。当然手动创建也没有问题。 具体配置说明 传送门>

  • 创建和配置主入口文件

在package.js文件中,需要新增

"bin": {
    "node-cli": "bin/index.js"
  }

其中node-cli是需要执行的命令名,bin/index.js是命令所调用的文件

  • 调试 到此,准备工作已经完成了,接下来我们在index.js文件中写入 console.log('my first cli');

打开命令行工具,进入当前当前开发文件夹,输入

bin/index.js

则会输出my first cli

但是这样有些麻烦,我们如何像发布后一样,直接输node-cli命令就可以调用我们的主文件呢? 我们需要在开发目录执行

npm link

就可在目前的全局环境中创建node-cli命令,成功以后,你就可以在本机任何目录执行node-cli

  • 一些包推荐 在开发命令行过程中,我们会碰到各种问题,比如fs模块的pomise化、用户命令的复杂交互、友好的版本升级提示等等。利用npm当中的成熟库会是一个好方法,推荐几个库.
  • 通用CLI构建

看了这么多,也许有点迷糊?基于上面的步骤,有一个通用的CLI项目目录,集成了几个推荐的包,在clone之后迅速开始一个CLI工具的构建:

传送门 >

看个成品

前一段时间做了一个TG-CLI工具,大家在实现自己的CLI工具时,可拿来参考。 主要用来搭建互娱网站系统内的PC和移动专题,并根据用户输入配置页面内的基本元素,如注释、SEO信息、上报代码,并根据配置自动配置gulp,实现自动压缩、分离、补全SEO信息等。

主要有这些功能:

  • 用户自主配置参数
  • 生成规范化目录结构
  • 自动生成配置文件
  • 命令包装
  • 版本检查

使用预览:

传送门:TG-CLI

在实际编写过一个CLI工具之后,我觉得除了让电脑爆炸的功能以外,什么都能实现 :) 大家多多交流:)

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏散尽浮华

设置linux账号的有效时间

在linux系统中,默认创建的用户的有效期限都是永久的,但有时候,我们需要对某些用户的有效期限做个限定! 比如:公司给客户开的ftp账号,用于客户下载新闻稿件的...

1828
来自专栏编程

武哥自学Python笔记(一)

最近Python被各大培训机构炒的火热,好像离开Python这个世界就不能运转一般,恰恰这个时候浙江省信息技术课程改革方案出台,Python确定进入浙江省信息技...

1868
来自专栏Vamei实验室

安卓第一夜 第一个应用

承接“Java快速教程”,我将开始写安卓相关的文章。 安卓(Android)开发主要使用Java语言。Java语言基础,是安卓开发的第一道门槛。再者,一个好的安...

1709
来自专栏张戈的专栏

修改WordPress默认评论表情(附:跳转到多说评论框的方法)

先吐槽一下:这两天博主折腾抢票火车票去了,博客也没怎么打理,最不爽的是折腾到最后才弄到一张无座的,唉,说多了都是泪啊!铁道部你技术不行可以招标啊,干嘛拿老百姓做...

3579
来自专栏无原型不设计

聊聊原型设计中的团队管理功能

在Mockplus3.3版本中,新增了团队管理功能,可以对团队成员、团队项目进行分组管理、权限设定。在团队成员管理上,可以编辑企业信息、邀请/删除团队成员、设置...

3467
来自专栏sunseekers

入门微信小程序 (一)

小程序已经快两岁的,我才入坑,刚刚入坑那会我使劲和我朋友抱怨,太难了,学不动,不想学,不学了。硬着头皮死磕一遍文档,然后觉得也没有我想象中那么难。或许是因为语言...

842
来自专栏Android群英传

Android核心破解原理详解

1105
来自专栏知晓程序

彻夜通读小程序「插件」文档后,我们帮你划了这几个开发重点

昨日,微信团队发公告称释放了两个新能力,小程序「插件」功能,以及开发者工具新增「代码片段」功能。

974
来自专栏walterlv - 吕毅的博客

Windows 10 自带那么多图标,去哪里找呢?

2018-02-27 15:11

401
来自专栏阮一峰的网络日志

网站的无密码登录

大部分网站,都要求用户登录。 常见的做法,是让用户注册一个账户。 ? 这种做法并不让人满意。 对于用户来说,每个网站必须记住一个密码,非常麻烦;对于开发者来说,...

3466

扫码关注云+社区