Question

我正在尝试创建可重用组件的方法，以便在前端html / scss项目中使用。假设所有组件都具有相同的文件夹和文件结构，我希望是否可以自动执行此任务。

我是现代网页设计的工作流程和行话的新手，我刚刚开始使用npm（目前使用node-sass和浏览器同步）。我希望有人能推荐最简单的方法来自动重复创建文件和文件夹。也许关于是否有任何npm软件包可能存在（我已经尝试过npm文件夹模板，但有理由相信它在Windows机器上无法正常工作）。

如果有人可以解释用于此类任务的术语，我将不胜感激，因为我遇到了诸如脚手架，模板，Yeoman和npm generate之类的术语，而且我对如何继续进行操作感到困惑。

示例结构：

featured-content/
|     break-points/
|     |_base.scss  
|     |_xl.scss  
|     |_l.scss 
|     |_m.scss  
|     |_s.scss 
|     |_xs.scss
|
|_featured-content.scss

非常感谢您的时间和帮助，萨姆

Answer 1

名为'plop'的npm包正是我想要根据模式生成文件和文件夹的原因。 'plop'是一个生成器框架，它使生成文件更简单，重复性更低，并支持用户提示和手柄模板。

包和文档的链接

https://plopjs.com/documentation/

https://www.npmjs.com/package/plop

plopfile.js的实施

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\n@import "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\n@import "components/{{name}}/{{name}}";'
            }
        ]
    });
};

自动创建重复文件和文件夹npm

1 个答案: