スタイルガイドジェネレーターの「Fractal」をgulpで使ってみる

2019.03.24

スタイルガイドジェネレータの「Fractal」をgulpで使用する方法をメモ。
Fractalの使い方については以前投稿した記事をご確認ください。

設定方法

コマンドプロンプトを開き、プロジェクトディレクトリに移動します。

1
cd 【プロジェクトディレクトリ】

package.jsonを作成します。

1
npm init

プロジェクトに使用するパッケージをインストールします。
今回はgulp、fractal、sassをインストールしました。

1
npm install gulp gulp-sass @frctl/fractal --save-dev

gulpfile.jsを作成して、以下のように記述します。

gulpfile.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
var gulp = require('gulp'),
    sass = require('gulp-sass');
 
/* fractalの設定 */
var fractal = require('@frctl/fractal').create();
// プロジェクト関連のメタデータ設定
fractal.set('project.title', 'cly7796.net');
// コンポーネントの設定
fractal.components.set('path', __dirname + '/src/styleguide/components');
// ドキュメントページの設定
fractal.docs.set('path', __dirname + '/src/styleguide/docs');
// 静的ファイルの設定
fractal.web.set('static.path', __dirname + '/htdocs/assets');
// スタイルガイドの出力先
fractal.web.set('builder.dest', __dirname + '/styleguide');
// consoleの表示用
var logger = fractal.cli.console;
 
/* ==================================================
   styleguide
================================================== */
gulp.task('styleguide', function(){
    var builder = fractal.web.builder();
    // 出力中のconsole表示設定
    builder.on('progress', function(completed, total) {
        logger.update(`${total} 件中 ${completed} 件目を出力中...`, 'info');
    });
    // 出力失敗時のconsole表示設定
    builder.on('error', function() {
        logger.error(err.message);
    });
    // 出力処理を実行
    return builder.build().then(function() {
        logger.success('スタイルガイドの出力処理が完了しました。');
    });
});
 
/* ==================================================
   sass
================================================== */
gulp.task('sass', function () {
  return gulp.src(['./src/sass/**/*.scss', '!./src/sass/**/_*.scss'])
  .pipe(sass({
    outputStyle : 'expanded'
  }))
  .pipe(gulp.dest('htdocs/assets/css/'));
});

4～36行目がfractalの内容になります。
4～15行目がfractalで使用するパスなどの設定なので、プロジェクトに応じて変更してください。
22～36行目がスタイルガイド出力のタスクになります。

今回のプロジェクトのディレクトリ構成は以下のようになっています。

  • htdocs
    • assets
      • css
  • src
    • sass
      • style.scss
    • styleguide
      • components
        • _preview.hbs
        • btn.hbs
        • btn–typeA.hbs
        • btn–typeB.hbs
      • docs
        • index.md
  • gulpfile.js
  • package.json

srcディレクトリ以下に開発用のファイル、htdocs以下に公開用のファイルが入る想定です。

src以下のsassファイルとスタイルガイド用のファイルを記述してみます。
まずはsrc/sass/ 以下にあるstyle.scssです。

style.scss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.btn {
  appearance: none;
  padding: 0;
  border: none;
  outline: none;
  color: #000;
  font-size: 14px;
  font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  background: transparent;
  cursor: pointer;
  border: #000 1px solid;
  border-radius: 3px;
  padding: 5px 10px;
 
  &--typeA {
    color: #ffffff;
    background: #ff0000;
  }
  &--typeB {
    color: #ffffff;
    background: #0000ff;
  }
}

ボタンとそのパターン違いのスタイルを設定しました。

次にsrc/styleguide/components/ 以下にあるコンポーネント用の4ファイルです。

_preview.hbs

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link media="all" rel="stylesheet" href="{{ path '/css/style.css' }}">
<title>Preview Layout</title>
</head>
<body>
{{{ yield }}}
</body>
</html>

btn.hbs

1
<button class="btn">Button</button>

btn–typeA.hbs

1
<button class="btn btn--typeA">Button</button>

btn–typeB.hbs

1
<button class="btn btn--typeB">Button</button>

_preview.hbsがプレビュー部分のレイアウトの設定、btn.hbs、btn–typeA.hbs、btn–typeB.hbsがそれぞれのボタンのコンポーネント用の記述です。

最後にsrc/styleguide/docs/ 以下にあるドキュメント用のファイルです。

index.md

1
2
3
4
---
title: cly7796 Fractal sample
---
Fractal sample page.

これで動作確認用のファイルの用意は一通り完了しました。
まずはsassのコンパイルを実行します。

1
gulp sass

これでhtdocs/assets/css/以下にstyle.cssが生成されました。
このcssファイルをスタイルガイド生成時にも使用します。

次にスタイルガイドの出力を実行してみます。

1
gulp styleguide

プロジェクトのルートディレクトリに「styleguide」というディレクトリが生成されていればOKです。
スタイルガイドのデモページ

最終的なディレクトリ構成は以下のようになります。

  • htdocs
    • assets
      • css
        • style.css
  • src
    • sass
      • style.scss
    • styleguide
      • components
        • _preview.hbs
        • btn.hbs
        • btn–typeA.hbs
        • btn–typeB.hbs
      • docs
        • index.md
  • styleguide
    • スタイルガイドのファイル群
  • gulpfile.js
  • package.json

　

【参考サイト】

　

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2025年3月
日 月 火 水 木 金 土
 1
2345678
9101112131415
16171819202122
23242526272829
3031