小型前端脚手架工具Plop

小型的脚手架工具，是一款主要用于去创建项目中特定类型文件的小工具，类似于Yeoman中的sub generator, 不过它一般不会独立去使用，一般我们会把Plop集成到项目当中。

接下来我们来通过两个案例的对比，去体会一下Plop的真正作用及他的优势。

日常开发中经常会遇到这样的问题，我们在开发当中，经常需要重复去创建相同类型的文件，例如每一个组件都会有三个文件去组成。分别是js，css，test.js, 如果我们需要创建一个组件，就要去创建三个文件，并且每一个文件中都要有一些基础代码，这就比较繁琐，而且我们很难统一每一个组件文件中那些基础的代码。Plop可以结局这个问题，我们只需要在命令行中取运行Plop

yarn plop component

会询问我们一些信息，并且自动的帮我们创建一些文件，这也就保证了我们每次创建的文件都是统一的，并且是自动的。

Plop的基本使用

接下来我们一起在一个项目汇总加入Plop的集成，去了解一下Plop他该如何使用，使用Plop的第一件事就是将Plop作为一个npm的模块安装到我们的开发依赖当中。

yarn add plop --dev

安装过后我们在项目的跟目录下新建一个plopfile.js文件，这个文件是plop工作的一个入口文件，需要导出一个函数，而且这个函数可以接收一个叫plop的对象，并且这个对象提供了一系列工具函数，用于去帮我们创建生成器的任务。

module.exports = plop => {
    plop.setGenerator('component', {});
}

plop有个成员叫setGenerator, 接收两个参数，第一个参数是生成器的名字，第二个参数是生成器的一些选项。

在配置选项中我们需要指定一下生成器的参数

{
    description: '生成器的描述',
    prompts: [ // 发出的命令行问题
        {
            type: 'input',
            name: 'name',
            message: 'component name',
            default: 'MyComponent'
        }
    ],
    actions: [ // 问题完成后的动作
        {
            type: 'add', // 添加一个全新的文件
            path: 'src/components/{
  {name}}/{
  {name}}.js', // 指定添加的文件会被添加到哪个具体的路径, 可以通过双花括号的方式使用命令行传入的变量
            templateFile: 'plop-templates/component.hbs', // 本次添加文件的母版文件是什么, 一般我们会把母版文件放在plop-template目录中，可以通过handlebars去创建模板文件.hbs
        }

    ]
}

数据填写完毕我们这个Plop就算是完成了。

在安装Plop模块的时候plop提供了一个CLI程序，可以通过yarn启动这个程序。
yarn plop ; // 生成器的名字

yarn plop component

yarn 会自动找到node_modules下bin目录下的命令行工具，回车过后就会执行我们上面定义的plop

我们可以尝试为生成器添加多个模板，就是添加多个actions, 官网中提供了多个type, 可以参考官网。

这就是Plop的一个基本使用，在这个过程中我们可以发现，Plop用来去创建项目当中同类型的文件还是非常方便的。

总结一下我们在一个项目当中具体去使用Plop需要这样几个步骤，首先我们需要将plop模块作为项目开发依赖去安装，然后我们需要在项目目录下创建一个plopfile.js文件，在有了plopfile文件过后我们需要在plopfile.js文件中定义一些脚手架任务，最后我们去编写一些用于生成特定类型文件的模板，这一切都完成过后我们需要通过plop提供的cli运行刚刚制定的脚手架任务，从而去生成我们在项目当中一些特定类型的文件。

脚手架的工作原理

通过询问你一些预设的问题，然后将你回答的结果结合一些模板文件，给你生成一个项目结构。

那接下来我们以一个小型的脚手架工具为例，通过NodeJS完成一个Node工具，再来去深入体会一下Node工具的工作过程。

那我们知道脚手架工具实际上就是一个node-cli应用，那创建脚手架就是创建一个node-cli应用，那这里我们具体来操作一下，我们首先进入到命令行，通过mkdir去创建一个工具目录

mkdir samlpe-cli
cd sample-cli

在这个目录下面我们通过yarn init 方式去初始化一个package.json文件

yarn init

有了这个文件之后通过编辑器打开这个目录，紧接着我们需要在package.json中添加一个bin字段，用于去指定一下我们cli应用的入口文件, 我们这里叫cli.js

{
   
  "name": "sample-cli",
  "bin": "cli.js",
  ...
}

再然后我们添加这个cli.js文件，跟以往我们在Node中书写的文件有所不同，cli的入口文件必须要有一个特定的文件头, 也就是在这个文件顶部写上这样一句话 #! /usr/bin/env node我们在这个文件中console.log一句话。

#! /usr/bin/env node

console.log('cli working')

如果说你的操作系统是linux或者mac系统你还还需要去修改这个文件的读写权限，把他修改成755，这样才可以作为一个cli的入口文件。

我们回到命令行，我们通过yarn link 将这个模块映射到全局

yarn link

这时候我们就可以在命令行使用sample这样一个命令, 通过执行这个命令我们的console.log成功打印出来，表示代码执行了。也就意味着我们这个cli基础就已经ok了。

sample-cli

接下来我们实现一下脚手架的具体业务，也就是我们脚手架的工作过程。

首先我们需要通过命令行交互的的方式去询问用户的一些信息，然后紧接着