# plop-demo

**Repository Path**: youkuf2e_admin/plop-demo

## Basic Information

- **Project Name**: plop-demo
- **Description**: plop生成器demo
- **Primary Language**: JavaScript
- **License**: ISC
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-01-27
- **Last Updated**: 2022-02-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 前言
模板生成器主要用来解决项目中一些重复性的需要手动去创建的文件及目录。手动创建存在命名不规范的问题，还需要手动引入模块，复制部分代码。所以，规律性的东西，就需要工具来解决。

如果你使用过`Ember`这个JavaScript框架，那么你就会知道，`Ember`提供的`Ember-CLI `工具是相当强大好用。其中有一个命令是`ember generate`,你可以使用它创建组件，路由，服务，模型以及其它。 

目前已知`CLI`生成器有`Yeoman`，还有`plop`和`hygen`。考虑到`Yeoman`本身比较大而全，我们就选择了`plop`这个小而美的工具。

## 如何使用
1. 安装
```
npm install --save-dev plop
```
2. 创建启动脚本

在项目的根目录，创建`plopfile.js`。默认的启动脚本就是`plopfile.js`。

```javascript
module.exports = (plop) => {
  // 设置一个生成器，第一个参数是生成器名称，第二个函数是对象，对应设置选项
  plop.setGenerator('html', {
    // 描述
    description: 'plop demo',
    // 命令行交互
    prompts: [
      // plop命令行交互引用的是Inquirer,此处语法参考Inquirer.js
      {
        type: 'input',
        name: 'routeName',
        message: '输入路由的名称',
      },
    ],
    // 完成命令行交互后的处理动作
    actions: [
      //每一个对象都是一个动作
      {
        type: 'add', // 代表添加文件
        // 被添加的文件在输出的哪个路径，双花括号插值表达式可以获取交互得到的数据
        path: 'src/{{routeName}}.html',
        // 模板文件
        templateFile: 'plopTpl/index.html.hbs',
      }
    ],
  });
};
```
3. 配置`package.json`脚本

```
{
  "scripts": {
    "create:html": "plop html --force"
  }
}
```
注意，`plop html --force`中，`plop`是执行命令，`html`是定义的生成器的名称，`plop html`就是你要执行`html`这个生成器。在`plopfile.js`中，我们刚刚定义了一个`html`生成器。`--force`参数则是忽略错误，强制执行。这个生成器`html`定义的`actions`中，有一个任务类型是`type: add`新增，如果新增的文件名发生了冲突，默认脚本是不会创建html的，加了`--force`参数，则会强行覆盖。

4. 创建模板目录

在项目的根目录创建一个模板目录，比如：`plopTpl`。然后在该目录下创建需要的模板文件，比如我们创建一个`index.html.hbs`。
需要说明一下，`.hbs`是`handlebars`模板，也就是说，`plop`的模板是使用的`handlebars`。

**index.html.hbs**:
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{routeName}}</title>
</head>
<body>
    <h2>this is a route:{{routeName}}</h2>
    <p><a href="/{{routeName}}">{{routeName}}</a></p>
</body>
</html>
```
5. 执行脚本

```
npm run create:html
```
命令行执行该命令，会有提示窗口，让我们输入路由的名称，输入 `home`。

可以看到，已经在`src`目录下生成了`home.html`。我们再看看生成的`home.htlm`内容：

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>home</title>
</head>
<body>
    <h2>this is a route:home</h2>
    <p><a href="/home">home</a></p>
</body>
</html>
```
对比下`index.html.hbs`模板，我们就发现，用户输入的字段`routeName`值已经被渲染到了对应的页面中。