告别CV大法,plop 生成模板文件

4/9/2021 工具

# 告别 CV 大法,plop 生成模板文件

# 背景

在写博客中,需要不停的新建页面,需要经历一遍又一遍重复的初始化过程:

  1. 先建一个 md 文件
  2. 然后复制粘贴标题、日期、标签等
  3. 最后才是具体的文章内容

Plop 能帮我们解决这些重复工作。

# Plop 的用法

Plop 是一个很容易上手的脚手架工具。它能通过终端命令,接收参数,创建指定的模板文件。

  • 在项目中安装 Plop
npm install --save-dev plop
1
  • 在项目根目录下新建 plopfile.js,是 plop 的配置文件
const moment = require('moment')
module.exports = function(plop) {
    plop.setGenerator('create', {
        // 此处的create是一个自己设定的名字,在执行命令的时候会用到
        description: '创建一个新的md文件',
        prompts: [
            {
                type: 'input', // 问题的类型,为用户输入
                name: 'title', // 问题对应的答案名,可以在actions中使用该变量
                message: '请输入标题', // 在命令行中的问题
                default: '标题', // 问题的默认答案
            },
            {
                type: 'input',
                name: 'date',
                message: '日期',
                default: moment().format('YYYY-MM-DD'),
            },
            {
                type: 'list', //问题的类型,为用户选择
                name: 'tag',
                message: '请选择标签',
                choices: ['CSS', 'Javascript', 'Vue', 'Webpack', '生活', '工具'], // 用户选择的可选择项
            },
        ],
        actions: (data) => {
            const date = '{{date}}'
            const actions = [
                {
                    type: 'add', // 操作类型,这里是添加文件
                    path: `docs/${date}.md`, // 模板生成的路径
                    templateFile: 'plop-templates/view/index.hbs', //模板文件的路径
                    data: {
                        name: date,
                    },
                },
            ]
            return actions
        },
    })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
  • 创建模板文件,在根目录下创建 plop-templates 文件夹,并在 plop-templates/view 里新建一个 index.hbs
---
title: { { title } }
sidebar: auto
sidebarDepth: 2
date: { { date } }
tags:
    - { { tag } }
---

## {{ title}}
1
2
3
4
5
6
7
8
9
10
  • 新增脚本 在 package.json中新增
"script":{
    ...,
    "create":"plop"
}
1
2
3
4
  • 运行 npm run create 然后就可以创建模板文件,效果如下图所示:

    创建模板

# 相关文档

上次更新: 4/9/2021, 5:10:00 PM