基于yeoman定制的交互式命令行脚手架

脚手架这个词估计做前端的都很熟悉。在没有实现前端工程化的年代，前端代码的组织都是纯手工维护的。比如我要做一个网站页面，那么我需要手动创建一个文件夹来存放代码文件，我把它命名为demo。然后在demo目录下创建src文件夹，在src文件夹内创建css文件夹、js文件夹、image文件夹、lib文件夹等等...一切都是手工维护。自从node.js出现后，前端开发才慢慢开始告别刀耕火种，越来越多的自动化工具充斥我们的眼球。模板生成、代码压缩、构建打包、自动部署...这些已经成为构建前端工程项目的标配。那么，一个模板生成的命令行工具的原理是什么？怎样开发一个属于自己的命令行脚手架工具？希望我写的这篇小文章会给大家带来一点启发。

原理

生成模板文件的方式可以是本地新建空白文件，然后进行文件内容读写；又或者是把本地已有的模板进行配置信息填充。然而我们知道，IO读写的速度非常慢，性能消耗大。但是一个模板生成器(Generator)如果是基于已有的模板文件进行配置填充，然后在copy到项目目录对应的位置，那会比直接读写磁盘效率更高。所以一般来说，模板生成器会采用第二种工作原理。

Yeoman-generator

模板生成器的脚手架有很多，前端领域每天都会有很多类似的轮子源源不断地从开源社区流出。这里我用来开发自己的generator的工具是Yeoman。Yeoman的Logo是一个戴着红帽子的大胡子，它是一个通用的脚手架搭建系统，可以创建任何的类型的app。同时它又是"语言无感知"的，支持创建任何类型开发语言的项目，Web, Java, Python, C# 等等。Yeoman的通用性在于，它本身不做任何决定，所有的操作都是通过Yeoman环境里面的各种generator实现的。通过自定义generator，我们可以创建任何格式的项目目录。这是Yeoman的最大魅力之处。另外，Yeoman通过提供promting这个方法实现输入式命令行交互，可以让用户自由填写配置信息，交互体验也非常棒。下面说说怎样基于Yeoman开发一个简单的generator：