繰り返しファイルとフォルダの作成を自動化するN32

Question

フロントエンドのhtml/scssプロジェクトで使用する再利用可能なコンポーネントを作成する方法を試しています。すべてのコンポーネントが同じフォルダとファイル構造を持つとすれば、私はこのタスクを自動化することが可能かどうかを考えていました。

最近のWebデザインではワークフローや専門用語が新しく、最近はnpm（現在はnode-sassとbrowser syncを使用している）から始めました。 ファイルやフォルダの繰り返し作成を自動化する最も簡単な方法をお勧めしたいと考えていました。おそらくnpmのパッケージがこの目的のために存在するかどうかについて（おそらくnpmのfolder-templateを試しましたが、Windowsマシンでは正しく動作しないと思う理由があります）。

足場、テンプレート、Yeoman、npmなどの用語が出てきているので、誰かがこのようなタスクに使用されている用語を説明できたらうれしいです。

構造例：あなたの時間と助け、 サム

Answer 1

「プロップ」の名前でNPMパッケージの

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

多くのおかげで、私が探していたまさにですパターンに基づいてファイルとフォルダを生成するためのものです。 '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}}";' 
      } 
     ] 
    }); 
}; 

の

https://plopjs.com/documentation/

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

実装をパッケージ化し、文書化する

リンク