1.安装plop
npm install plop --global
2.创建模板文件
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.创建plopfile.js
以创建相同名称的js和html文件为例
module.exports = plop => {
plop.setGenerator('page', {
description:'create new page', // 这里是对这个plop的功能描述
prompts:[{
type:'input', // 问题的类型
name:'pageName', // 问题对应得到答案的变量名，可以在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的第一个参数
plop page
image.png
生成的html文件：
image.png
生成的js文件：
image.png
