PLOP CLI: Generating New Files from Templates

In this article, I will introduce PLOP.
I'll use the creation of posts for this blog, which is written in GatsbyJS, as an example.

Consistency Made Simple : PLOP

Step 1. Installation

For some reason, it didn't work when I installed it globally via npm.
I installed it as a project dependency.

yarn add plop -D

Step 2. Create a Template

Prepare a template for the article.
I defined it in Markdown, including meta-information.

title=post.hbs

---
title: {{title}}
date: {{date}} {{hms}}
topics:
- a
- b
category: {{category}}
---

In this article, I will introduce {{title}}.

Variables are defined using {{variable}}.

Step 3. Create plopfile.js

Write the configuration for generating files.

Make sure to prepare the variables required for the template and the file path.

title=propfile.js

const pad00 = (num) => String(num).padStart(2, '0')
const date = new Date()
const year = date.getFullYear()
const month = pad00(date.getMonth() + 1)
const day = pad00(date.getDate())
const hms = `${pad00(date.getHours())}:00:00`
const datePrefix = `${year}-${month}-${day}`

const categories = ['Other', 'Tech', 'BlogOps']

module.exports = function (
  /** @type {import('plop').NodePlopAPI} */
  plop
) {
  plop.setHelper('getKebabFirst', (date) => date.split('-')[0])
  plop.setHelper('hms', () => hms)
  plop.setGenerator('post', {
    description: 'Write new blog post',
    prompts: [
      { type: 'input', name: 'title' },
      { type: 'input', name: 'id', message: `kebab-case` },
      {
        type: 'input',
        name: 'date',
        default: datePrefix,
        message: `YYYY-MM-DD`,
      },
      {
        type: 'list',
        name: 'category',
        default: 'Tech',
        choices: categories,
      },
    ],
    actions: [
      {
        type: 'add',
        path: `content/blog/{{getKebabFirst date}}/{{date}}___{{id}}.md`,
        templateFile: 'templates/post.hbs', // The path where your template is located
      },
    ],
  })
}

With the code above,

title is configured via input,
id (slug, required for the file path) is also configured via input,

category is configured by selection,

and the file path and timestamp will be automatically generated by default.

You can use the question type from Inquirer.js.

SBoudrias/Inquirer.js: A collection of common interactive command line user interfaces.

Step 4. Run it

yarn plop

title=content/blog/2020/2020-01-13___gatsby-plop-newpost.md

---
title: 【PLOP】GatsbyJSで新しい記事をテンプレートから作成する
date: 2020-01-13 20:00:00
topics:
- a
- b
category: BlogOps
---

In this article, I will introduce 【PLOP】GatsbyJSで新しい記事をテンプレートから作成する.

## Step 1. Initialize

## Step 2. Define the Request

## In the case of xx

The target file has been generated at the intended path!

Final Thoughts

Generating files from templates is a simple yet common need, and I found this tool while looking for something I hadn't heard of before.

Initially, I Googled things like "file template generator cli" and couldn't find much, so I almost tried to implement it myself using shell or sed. However, I remembered that react-boilerplate/react-boilerplate had a generator, and when I looked into what was being used, I came across plop.

I also found other things that seem useful.