vs
Yeoman is used for generating a project once
Plop is for continuously integrating new components
source: xkcd.com/1205
There is more to it, than saving time
import MyComponent from './my-component'
const myComponent = new MyComponent
<my-component></my-component>
How to get started
yarn add plop
touch plopfile.js
Prompts
Name & Description
plop.setGenerator('UI Component', {
description: 'A new LESS component with KSS documentation',
prompts: [
{
type: 'input',
name: 'name',
message: 'Name your new component (e.g.: Button)',
validate: v=>/^[A-Z][a-z]/.test(v)?true:'the name must begin with an uppercase letter'
},
{
type: 'confirm',
name: 'type',
message: 'Are there different types for your component? (e.g.: .button-outline)',
},
{
type: 'checkbox',
name: 'colors',
message: 'In which colors is your component available?',
choices: ['primary', 'secondary', 'light', 'dark', 'aside'],
}
],
Actions
actions: [
{
type: 'modify',
path: 'base/less/components.less',
pattern: /(\n\/\/ COMPONENT DEFINITIONS \/\/)/gi,
template: '@import "components/{{dashCase name}}.less";\n$1'
},
{
type: 'modify',
path: 'base/less/components.less',
pattern: /$/g,
templateFile: 'plop_templates/component-definition.hbs'
},
{
type: 'add',
path: 'base/less/components/{{dashCase name}}.less',
templateFile: 'plop_templates/component.hbs'
}
]
Presentation carefully prepared by
Martin Muzatko
@martinmuzatko
More about front-end dev by Martin?
Looking for an awesome company to work with?