了解 -- Plop · 前端工程化学习笔记

>[success] # Plop [Plop 推荐文章，更多使用细节读这个文章](https://www.yuque.com/kongdepeng/rgpm60/pt15oa) ~~~ 1.官网对'Plop'的介绍：把Plop称为'micro-generator framework'。现在，我称其为'小工具'，因为它为您提供了一种以一致的方式生成代码或任何其他类型的纯文本文件的简单方法。 2.在开发中经常需要创建相同类型的文件，整个过程非常繁琐，而且很难统一项目中基础的代码。 'Plop'是一款主要去为了创建项目中特定类型文件的小工具，有点类似 Yeoman 中的 Sub Generator，不过它不会独立去使用，一般我们会把 Plop 集成到项目当中用来去自动化的创建同类型的项目文件 3.简单的说和之前的'Yeoman'相比'Yeoman'通过'yo' 来提供的'generator' 但是'Yeoman'这种创建的是整个项目目录结构和文件配置一类，即使也可使用'Yeoman 中的 Sub Generator'来创建小型项目结构目录和配置文件，是需要独立去使用的，' Plop 集成到项目'跟项目针对性的扩展使用的 ~~~ >[danger] ##### 举个实际开发的例子 ~~~ 1.在多页面开发的情况下，经常我们需要创建如下的工程目录,站在代码的角度来说，我们可以提供一个方法用户输入指令决定文件名称，我们根据这个名称来生成'css,js,html'文件，甚至文件内项目通用部分内容和'js','css' 引入，这种工作已经是在项目开发阶段在做了'Yeoman'虽然也可以实现，但是导致说可能这类的工作只会使用到'Yeoman '极少部分的api，此时就是'Plop'工具使用 ├───index │ ├─── index.css │ ├─── index.html │ └───index.js ├───home │ ├─── home.css │ ├─── home.html │ └─── home.js ~~~ >[info] ## 使用Plop ~~~ 1.关于安装，'Plop' 是针对项目开发阶段使用，一般是安装在开发依赖包，当然也可安装在全局随时使用 npm install --save-dev plop -- 安装项目到开发依赖 npm install -g plop -- 安装项目到全局依赖 2.因为plop 集成的是Handlebars 因此要遵循Handlebars模板定义规则 ~~~ >[danger] ##### 使用 ~~~ 1.在项目的根目录下创建一个plopfile.js ~~~ * plopfile.js ~~~ // Plop 入口文件，需要导出一个函数 // 此函数接收一个 plop 对象，用于创建生成器任务 // plop 是一个node 工具因此这里使用node 的导出方式 module.exports = plop => { // plop 和yeoman 一样也提供了自己一些api接口 // 第一个参数是'Generator'名字后期就是告诉plop执行对应命令的名称 // 第二个config对象需要包括提示和操作，其中actions 对应执行命令动作 plop.setGenerator('my-first', { description: '使用polp创建的第一个脚手架工具指令', prompts: [{ type: 'input', name: 'name', message: '创建文件的名字', default: 'index' }], actions: [{ type: 'add', // 代表添加文件可以配置其他动作指令Add，AddMany，Modify，Append path: 'src/components/{{name}}/{{name}}.html', // 生成文件在项目位置 templateFile: 'plop-templates/index.hbs' // 因为plop 集成的是Handlebars 因此要遵循Handlebars模板定义规则 }, { type: 'add', // 代表添加文件 path: 'src/components/{{name}}/{{name}}.css', templateFile: 'plop-templates/index.css.hbs' }, ] }) // 创建更多的指令 plop.setGenerator('my-second', { description: '使用polp创建的第二个脚手架工具指令', prompts: [{ type: 'input', name: 'name', message: '创建文件的名字', default: 'index' }], actions: [{ type: 'add', // 代表添加文件 path: 'src/components/{{name}}/{{name}}.html', // 生成文件在项目位置 templateFile: 'plop-templates/index.hbs' // 因为plop 集成的是 }, { type: 'add', // 代表添加文件 path: 'src/components/{{name}}/{{name}}.css', templateFile: 'plop-templates/index.css.hbs' }, ] }) } ~~~ * plop-templates 文件下创建的模板 ~~~ // index.hbs <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link href="./{{name}}.css"> </head> <body> <p>{{name}}</p> </body> </html> ~~~ >[danger] ##### 使用 ~~~ npm plop <name> ,例如上面的案例我想使用的时候输入'npm plop my-first',也可以将指令配置在pack.json中 ~~~