1.安裝plop
npm install plop --global
2.創(chuàng)建模板文件
html模板文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{pageName}}</title>
<script src="{{pageName}}.js"></script>
</head>
<body>
<text>{{pageName}}</text>
</body>
</html>
js模板文件
console.log('{{pageName}}')
3.創(chuàng)建plopfile.js
以創(chuàng)建相同名稱的js和html文件為例
module.exports = plop => {
plop.setGenerator('page', {
description:'create new page', // 這里是對這個plop的功能描述
prompts:[{
type:'input', // 問題的類型
name:'pageName', // 問題對應(yīng)得到答案的變量名，可以在actions中使用該變量
message:'your fileName', // 在命令行中的問題
default:'page' // 問題的默認答案
}],
actions:[{
type:'add', // 添加文件
path:'./pages/{{pageName}}/{{pageName}}.js', // 路徑
templateFile:'./plop-templates/temp.js' // 模板文件路徑
},{
type:'add',
path:'./pages/{{pageName}}/{{pageName}}.html',
templateFile:'./plop-templates/temp.html'
}]
})
}
4.使用
生成器的名稱就是上面plopfile.setGenerator的第一個參數(shù)
plop page
image.png
生成的html文件：
image.png
生成的js文件：
image.png
