大家好，欢迎来到IT知识分享网。

今天这篇文章给大家详解一个微型的脚手架工具——plop，它的特点是可以根据一个模板文件批量的生成文本或者代码，不再需要手动复制粘贴，省事省力。

安装

本地安装

npm install plop --save-dev

全局安装

npm install plop -g

如果是本地安装，你可以在pakage.json文件中配置scripts命令，如下，

// package.json { ..., "scripts": { "plop": "plop" }, ... }

本篇文章我们以全局命令方式讲解，在运行plop命令时，这个命令会在工程中寻找一个配置文件——plopfile.js，plop所有的运行的配置都在这个文件中开发，类似于gulp。

配置plopfile.js

plopfile.js文件以commonjs的规范输出一个函数，函数的参数是一个plop对象，它暴露了各种可供调用的api。

先看一个例子，如下，

图1

图1主要是利用setGenerator方法去生成一个模板，这个方法的第一个参数是字符串，表示这个生成器的名称，第二个参数是一个对象，主要的字段是prompts和action。咱们运行一下plop命令，如下，

图2

图2中我们演示了一下操作，生成了一个test.txt文件。看着这个命令行界面是不是很熟悉，对，没错，plop内部就是封装了inquirer模块，此模块的prompt都可以应用在plop中。

图1中我们把代码模板放在了template字段中，但是当模板代码较多时，这样做就不方便了。这时咱们可以把代码模板放在一个文件中，使用templateFile字段对应一个模板文件路径，效果也是一样的，如下，

图3

接下来，我们看看如何向已存在的文件中追加文本，如下，

图4

如图4，type变为了modify，pattern是一个正则表达式，用它来匹配目标文件追加的位置。template写法需要注意一下，$1是pattern正则括号内匹配到的字符串，此处是– APPEND HERE –，我们可以称它为位置占位符。当发生替换时，占位符会连同模板文本一起替换掉目标文件中的占位符，所以这个占位符会一直存在于目标文件中，方便后续的追加。

另外，$1如果写在结尾表示向后追加，如果写在开始就会沿着占位符向前追加，如果不写$1，替换只能发生一次，之后就不会存在占位符。

除了使用pattern正则匹配，还可以使用transform方法，如下，

图5

transform方法第一个参数是目标文件的内容，data是action的数据对象，它的返回值将会替换目标文件内容。

用法tip

1、使用helper

图6

图6中增加了一个dashAround helper，使用时将它放在模板变量之前，可以对模板变量做进一步处理。

2、使用模板片段

对于一些公共的片段，咱们可以抽出来以供复用，如下，

图7

如图7，我们使用addPartial方法抽出了一个模板片段，在使用时需要注意加一个大括号。

总结

这篇主要介绍了一个微型的脚手架工具plop，当我们需要生成有一定样式的文件时特别有用，省时省力。

喜欢我的文章就关注我吧，有问题可以发表评论，我们一起学习，共同成长！