一个小型前端脚手架工具plop的使用

对于前端的一些重复代码，我们可以使用plop这个小型前端工具来代替我们进行工作
全局安装plop
npm i plop -g
mac安装
sudo npm i plop -g

创建文件

mkdir my-app
cd my-app
npm init  //初始化生成package.json

项目安装plop
npm i plop --save-dev
然后在plop-project下创建一个plopfile.js文件，用来写plop代码
创建一个plop-templates文件夹 ，提供模板用来生成文件，模板文件我写了一个js和一个css文件，目录如下

生成前文件目录

接下来写plopfile.js内的代码

module.exports = plop => {
    plop.setGenerator('components',{
        "description": '视图组件',//描述
        "prompts":[{
            type:'input',
            name:'name',
            message:'Components name',
            default:'yoursComponent',
        }],
        "actions":[{//这里是模版操作，对提供的模板进行复制到相应的文件内，不用在自己去创建
            path:'src/components/{{name}}.css',//输出文件路径，name就是命令行你对prompts询问的回答
            type:'add',//类型是添加
            templateFile:'plop-templates/index.css'//模板文件路径
        },{
            path:'src/components/{{name}}.js',
            type:'add',
            templateFile:'plop-templates/index.js'
        }]
    });
}

然后命令行运行
plop components

prompts的询问

这里plop后边跟的名字就是你定义的名字，plop.setGenerator函数得一个参数名称
之后文件夹内会生成相应的文件

生成文件后的项目目录

感觉这个小工具还挺好用的，比如我们在开发过程中对于后台管理系统有了一个统一的模板，我们可以写这样一个脚本运行，自动生成后台管理系统的模板，减少重复代码的搭建。或者说react项目中每个文件夹有js，css等文件，我们也是可以用plop进行生成，解决部分重复的操作。
最后，因为我写的比较简单，在学习的过程中看过一篇很不错的文章传送门,写的很详细，希望能对小伙伴有帮助

不积硅步无以至千里

不积小流无以成江河