zoukankan      html  css  js  c++  java
  • 前端自动化工具

    Plop  根据模板自动化创建文件的前端自动化架构解决方案

    使用方式

    1.  yarn add plop  --dev  安装在开发依赖当中

    2.  根目录创建    plopfile.js 文件

    这个文件是plop入口文件, 需要导出一个函数,这个函数接受一个plop对象,用于创建生成器任务

    module.exports = plop => {
        plop.setGenerator('component', {
            description: 'create a component',
            prompts: [{
                    type: 'input',
                    name: 'path',
                    message: 'path and file name',
                    default: 'mycomponent'
                },{
                    type: 'input',
                    name: 'name',
                    message: 'component name',
                    default: 'MyComponent'
            }],
            actions: [{
                type: 'add',
                path: 'src/components/{{path}}/{{name}}.js',
                templateFile: 'plop-templates/component.hbs'
            }
            ,{
                type: 'add',
                path: 'src/components/{{path}}/{{name}}.vue',
                templateFile: 'plop-templates/component.vue.hbs'
            },{
                type: 'add',
                path: 'src/components/{{path}}/{{name}}.css',
                templateFile: 'plop-templates/component.css.hbs'
            }
        ]
        })
    }

    3. 编写模板文件  一般放在根目录下 plop-templates 里面

    4.通过执行  yarn plop component  执行命令生成文件     component 为生成器定义名称

  • 相关阅读:
    git初学【常用命令、上传项目到码云或从码云拉取、克隆项目】
    dedecms自学
    sublime3使用笔记
    路由功能
    bootstrap模态框篇【遇到的问题】
    justgage.js的使用
    fullpage.js使用方法
    js&jq遇到的问题(不断更新中)
    图灵完备——停机问题
    中断
  • 原文地址:https://www.cnblogs.com/faint33/p/14734790.html
Copyright © 2011-2022 走看看