preface

We often need to create new directories and files in our daily development, but these things are the same height, and we need to do it repeatedly. The original method was to use Ctrl + c and Ctrl + v to manually create one by one. For example, we developed wechat applets in VSCode. WXML, **.js, **. WXSS, and **. Json files are created every time we create a new page or component, and then dynamically create internal variables and class names based on the component or page. This severely reduces our development efficiency, and the PLOP tool is a great way to solve these tedious and simple things.

What is Plop?

Plop is what I like to call a “micro-generator framework.” Now, I call it that because it is a small tool that gives you a simple way to generate code or any other type of flat text files in a consistent way. You see, we all create structures and patterns in our code (routes, controllers, components, helpers, etc). These patterns change and improve over time so when you need to create a NEW insert-name-of-pattern-here, it’s not always easy to locate the files in your codebase that represent the current “best practice.” That’s where plop saves you. With plop, you have your “best practice” method of creating any given pattern in CODE. Code that can easily be run from the terminal by typing plop. Not only does this save you from hunting around in your codebase for the right files to copy, but it also turns “the right way” into “the easiest way” to make new files.

Plop is a small build framework that allows you to quickly create template files using terminal commands. The official website is plopjs.com/, and you need to know the syntax of.hbs.

use

The installation

Before using Plop, you need to install Plop

NPM install -g plop is used hereCopy the code

Creating a file Directory

Then we create a new test directory, initialize NPM, and create a plopfile.js file, which is a Plop entry file similar to gulpfile.js.

mkdir plop-demo
cdPlop-demo // Press enter NPM initCopy the code

The directory structure is shown below:

Write the plopfile.js file

/ / plopfile. Js file
module.exports = plop= > {
    // The first parameter is the plop subproject name, and the second parameter is the plop configuration parameter
    plop.setGenerator('component', {
        // Project description (For example, creating a VUE template)
        description: 'Create a vue component'.// Terminal interaction to collect user input information
        prompts: [{type: 'input'.// Interaction type
                name: 'name'.// The information field for the current interaction
                message: 'Component name'.// Prompt message
                default: 'my-component' // Default name}].// Execution of ploP
        actions: [{type: 'add'.// mode (this is new)
                path: 'src/components/{{name}}/{{name}}.vue'.// The path to the generated file
                templateFile: 'plop-templates/components/vue.hbs' // plop template path})}}]Copy the code

Write vue. HBS templates

<template>
  <div class="{{name}}">
    {{name}}component</div>
</template>

<script>
export default {
  name: '{{name}}'}</script>

<style scoped>
.{{name}} {
  background-color: #f5f6f7;
}
</style>
Copy the code

Modify the package.json file and run it

Modify package.json file to create a quick build command

{... scripts: {"vueComponent": "plop component"}}Copy the code

Then, type NPM run vueComponent in the terminal to quickly create a vue template (this is just an example, using vscode to create a code snippet directly is faster). You will be prompted as follows:

After you enter the name of the Hello component, the file is automatically created

Hello.vue file content after creation

This allows you to quickly create the file and directory structures you want.