'풍덩'의 이름에 NPM 패키지
featured-content/
| break-points/
| |_base.scss
| |_xl.scss
| |_l.scss
| |_m.scss
| |_s.scss
| |_xs.scss
|
|_featured-content.scss
많은 감사는 내가 찾던 정확히 패턴을 기반으로 파일 및 폴더를 생성합니다. 'plop'은 파일을 더 간단하고 반복적으로 생성하지 않고 사용자 프롬프트와 핸들 바 템플릿을 지원하는 생성자 프레임 워크입니다.
링크 plopfile.js의
https://plopjs.com/documentation/
https://www.npmjs.com/package/plop
구현 패키지와 설명서를
module.exports = function (plop) {
//prepend selectors to avoid conflicts
var companyName = 'super';
var themeName = 'awesome';
// prefix combine
var prefix = companyName + '-' + themeName + '-';
//paths
var blockPath = 'includes/blocks/components/';
var sectionPath = 'includes/sections/components/';
var blockModifyPath = 'includes/blocks/_blocks.scss';
var sectionModifyPath = 'includes/sections/_sections.scss';
plop.setHelper('prefix', function() {
return prefix;
});
// block generator
plop.setGenerator('block', {
description: 'generate block',
prompts: [{
type: 'input',
name: 'name',
message: 'block name please'
}],
actions: [
//import file
{
type: 'add',
path: blockPath + '{{name}}/_{{name}}.scss',
templateFile: 'plop-templates/blocks/blocks.hbs'
},
//php file
{
type: 'add',
path: blockPath + '{{name}}/{{name}}.php',
templateFile: 'plop-templates/blocks/php.hbs'
},
//breakpoint base size
{
type: 'add',
path: blockPath + '{{name}}/break-points/_base.scss',
templateFile: 'plop-templates/blocks/base.hbs'
},
//breakpoint xl size
{
type: 'add',
path: blockPath + '{{name}}/break-points/_xl.scss',
templateFile: 'plop-templates/blocks/xl.hbs'
},
//breakpoint l size
{
type: 'add',
path: blockPath + '{{name}}/break-points/_l.scss',
templateFile: 'plop-templates/blocks/l.hbs'
},
//breakpoint m size
{
type: 'add',
path: blockPath + '{{name}}/break-points/_m.scss',
templateFile: 'plop-templates/blocks/m.hbs'
},
//breakpoint s size
{
type: 'add',
path: blockPath + '{{name}}/break-points/_s.scss',
templateFile: 'plop-templates/blocks/s.hbs'
},
//breakpoint xs size
{
type: 'add',
path: blockPath + '{{name}}/break-points/_xs.scss',
templateFile: 'plop-templates/blocks/xs.hbs'
},
//modify blocks file
{
type: 'modify',
path: blockModifyPath,
pattern: /(\/\/-- IMPORT BLOCKS --)/gi,
template: '$1\r\[email protected] "components/{{name}}/{{name}}";'
}
]
});
//section generator
plop.setGenerator('section', {
description: 'generate section',
prompts: [{
type: 'input',
name: 'name',
message: 'section name please'
}],
actions: [
//import file
{
type: 'add',
path: sectionPath + '{{name}}/_{{name}}.scss',
templateFile: 'plop-templates/sections/sections.hbs'
},
//php file
{
type: 'add',
path: sectionPath + '{{name}}/{{name}}.php',
templateFile: 'plop-templates/sections/php.hbs'
},
//breakpoint base size
{
type: 'add',
path: sectionPath + '{{name}}/break-points/_base.scss',
templateFile: 'plop-templates/sections/base.hbs'
},
//breakpoint xl size
{
type: 'add',
path: sectionPath + '{{name}}/break-points/_xl.scss',
templateFile: 'plop-templates/sections/xl.hbs'
},
//breakpoint l size
{
type: 'add',
path: sectionPath + '{{name}}/break-points/_l.scss',
templateFile: 'plop-templates/sections/l.hbs'
},
//breakpoint m size
{
type: 'add',
path: sectionPath + '{{name}}/break-points/_m.scss',
templateFile: 'plop-templates/sections/m.hbs'
},
//breakpoint s size
{
type: 'add',
path: sectionPath + '{{name}}/break-points/_s.scss',
templateFile: 'plop-templates/sections/s.hbs'
},
//breakpoint xs size
{
type: 'add',
path: sectionPath + '{{name}}/break-points/_xs.scss',
templateFile: 'plop-templates/sections/xs.hbs'
},
//modify sections file
{
type: 'modify',
path: sectionModifyPath,
pattern: /(\/\/-- IMPORT SECTIONS --)/gi,
template: '$1\r\[email protected] "components/{{name}}/{{name}}";'
}
]
});
};