前端自动化构建工具--Plop

前端自动化构建工具 ---- Plop

前言：周末在家学习了一些前端自动化构建工具，Generator、Plop、Grunt、Gulp，我还以为目前用不到这些工具，没想到周一一上班看到这周任务是要开发N个新模块，我就感觉我该求助于某个自动化工具了😂😂

我要开发的每个模块的结构骨架都非常相似，就可以使用Plop来实现自动化了，Plop旨在根据模板文件自动化创建组件，而不是一个完整的大型应用，这是非常符合我的预期的😄😄😄，接下来我就来介绍一下Plop如果帮助我们在开发过程中提高工作效率。

一、安装plop

在项目的根目录下面使用yarn命令安装plop：yarn add plop

可以在Plop代码仓库看到Plop源代码以及详细说明文档：https://github.com/plopjs/plop

二、编写plop的入口文件：plopfile.js

在项目根目录下创建一个文件:plopfile.js。在后面的命令行交互中，我们可以通过prompts获取用户输入的一些信息，如下面的name变量就会由用户输入获得，默认值是MyComponent。我们在指定模板文件生成新文件的时候，可以通过花括号形式的插值表达式传入用户输入的值，如{ {name}}.js,那生成的文件名就是用户输入的字符串名字。

plopfile.js：

// Plop 入口文件，需要导入一个函数
// 此函数接受一个plop对象，用户创建生成器任务

module.exports = plop => {
   
  plop.setGenerator('component', {
    // component 就是接下来的yarn plop命令后面带来指令名称
    description: 'create a component',
    prompts: [
      {
   
        type: 'input',
        name: 'name',
        message: 'component name',
        default: 'MyComponent'
      }
    ],
    actions: [
      {
   
        type: 'add', // 代表添加文件
        path: 'src/components/{
   {name}}/{
   {name}}.js', // 要生成的文件路径
        templateFile: 'plop-templates/component.hbs' // 文件模板
      },
      {
   
        type: 'add', // 代表添加文件
        path: 'src/components/{
   {name}}/{
   {name}}.css',
        templateFile: 'plop-templates/co