今天這篇文章給大家詳解一個微型的腳手架工具——plop，它的特點是可以根據一個模板文件批量的生成文本或者代碼，不再需要手動複製粘貼，省事省力。
安裝
本地安裝
<code>npm install plop --save-dev/<code>
全局安裝
<code>npm install plop -g/<code>
如果是本地安裝，你可以在pakage.json文件中配置scripts命令，如下，
<code>// package.json
{
...,
"scripts": {
"plop": "plop"
},
...
}/<code>本篇文章我們以全局命令方式講解，在運行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，當我們需要生成有一定樣式的文件時特別有用，省時省力。
喜歡我的文章就關注我吧，有問題可以發表評論，我們一起學習，共同成長！
