Fractial로 만든 스타일 가이드

개시하다

최근 내가 속한 웹 제작진이 스타일 가이드를 도입했다.
디자이너와 엔지니어가 함께 사이트를 제작할 때 자주 사용하는 구성 요소를 스타일 가이드에 정리하면 공통된 업무 효율화가 매우 편리하다.

내 팀에서 스타일 매뉴얼은 Fractal이라는 틀로 구축되었다.
이 기사에서 나는 그 구축할 때 배양한 지식만 소개한다.

이 보도에서

Fractial CLI에서 매개 변수로 입력한 component의 hbs 파일을 HTML 파일의 스크립트로 보여 줍니다.

전제 조건

Fractial의 스타일 가이드를 사용하는 프레임워크를 제작하거나 이해했다
(아직 오지 않은 사람은 이쪽으로 GO👉 Fractal - Getting Started )

소스 코드

fractal.js

const fs = require('fs');
const path = require('path');

// To create new dir func if there is nothing on the dirPath
let makeDir = (dirPath) => { if (!fs.existsSync(dirPath)) { fs.mkdirSync(dirPath); } };
makeDir('./exports');

// Custom command func for export
function exportComponents(args, done) {
  const app = this.fractal;
  const target = args.component;

  let targetItem;
  const componentList = [];
  for (let item of app.components.flatten()) { 
    componentList.push(item.handle);
    if (item.handle === target) targetItem = item;
  }

  if (targetItem) {
    targetItem.render(null, null, {
      preview: true
    }).then(function (html) {
      const filePath = path.join('./exports/', args.options.output || '', `${targetItem.handle}.html`);
      fs.writeFile(filePath, html, function (err) {
        if (err) app.cli.console.error(`Error exporting ${args.component} - ${err.message}`);
        else app.cli.console.success(`Component ${args.component} exported to ${filePath}`);
        done();
      });
    });
  } else {
    app.cli.console.error(`Component ${args.component} not found`);
  }
}

// Set custom export command func to Fractal CLI
fractal.cli.command('export <component>', exportComponents, {
  description: 'export a component',
  options: [
    ['-l, --layout', 'export the component within it\'s preview layout.'],
    ['-o, --output <output-dir>', 'The directory to export the component into, relative to the CWD.'],
  ]
});

package.json

{
  "name": "fractal-demo",
  "version": "1.0.0",
  "scripts": {
    "export": "fractal export"
  }
...
}

실행 예

console

$ npm run export button

> [email protected] export /Users/username/GitHub/fractal-demo
> fractal export "button"

✔ Component button exported to export/01-ui-parts/button/01-button/index.html

실행 결과

HTML 파일을 내보냈습니다.

사이트 축소판 그림

Github issue - Possibility to export components only as rendered HTML files

Github issue - Specify target components to Builder

왜 그랬어

필요한 구성 요소의 HTML 파일을 하나씩 잘라서 사용하려고 하기 때문입니다.
공식적으로 준비한 구현 기능은 템플릿 엔진Handlebars을 바탕으로 독특한 템플릿 구조로 작성되었기 때문에 구성 요소 단위로 HTML을 얻으려면 상기 스크립트처럼 Custom commands 자체 기능이 필요합니다.
그나저나 아직 설치되지 않았으니 앞으로 공식에 같은 렌더링 기능build 방법이 추가될 수도 있다.

추가:스크립트 적용

CLI 도구 개발PLOP과 oclif 등을 결합하면 다음과 같은 기능을 확장할 수 있어 매우 편리하다.

재생성할 구성 요소를 대화식으로 선택할 수 있음

HTML 관련 파일을 동시에 가져올 수 있음

실행 예

console

$ npm run export

> [email protected] export /Users/username/GitHub/fractal-demo
> plop export

? Which component?: 01-ui-parts
❯ 01-ui-parts
  02-header-parts
  03-footer-parts
  04-praph-parts
? What new component category?: button
❯ button
  title
  sub-title
  navbar
  register
[SUCCESS] function Exported: 01-ui-parts < button

실행 결과

이 예에서는 구성 요소의 HTML 파일과 관련 파일을 선택하여 각 구성 요소의 폴더로 출력합니다.

Node.js의 CLI 도구 개발은 다른 Vorpal,Commander,Ginit 등 다양한 개발이 있기 때문에 자신이 좋아하는 것을 선택하는 것이 좋다.