スタイルガイドジェネレーターの「Fractal」でpugを使用する

fractalのコンポーネントでpugを使う方法をメモ。
環境は以前投稿したgulpを使った環境をベースにします。

設定方法

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

• htdocs
• src
  • pug
  • styleguide
    • components
    • docs

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

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

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

package.jsonを作成します。

npm init

gulp、pug、fractalと、fractalでpugを利用できるようにFractal Pug Adapterをインストールします。

npm install gulp gulp-pug @frctl/fractal @rsm/fractal-pug-adapter --save-dev

プロジェクトルートにgulpfile.jsを作成して、以下のように記述します。

gulpfile.js

var gulp = require('gulp'),
    pug  = require('gulp-pug');
 
/* fractalの設定 */
var fractal = require('@frctl/fractal').create();
fractal.components.engine('@rsm/fractal-pug-adapter');
// プロジェクト関連のメタデータ設定
fractal.set('project.title', 'cly7796.net');
// コンポーネントの設定
fractal.components.set('ext', '.pug');
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('スタイルガイドの出力処理が完了しました。');
    });
});
 
/* ==================================================
   pug
================================================== */
gulp.task('pug', function() {
  gulp.src(
    ['./src/pug/**/*.pug', '!./src/pug/**/_*.pug']
  )
  .pipe(pug({
    pretty: true,
    basedir: './src/pug'
  }))
  .pipe(gulp.dest('./htdocs'))
});

6行目でFractal Pug Adapterの読み込み、10行目でpugを使用できるように設定しています。
Pugのオプションを設定したい場合はこちらを確認ください。

src/styleguide/components/ 以下に_preview.pugとbtn.pugを設置して、以下のように記述します。

_preview.pug

doctype html
html
	head
		meta(charset="utf-8")
		link(media="all" rel="stylesheet" href=path('/css/style.css'))
		title Preview Layout
	body
		!= yield

btn.pug

button.c-btn Button

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

gulp styleguide

プロジェクトルートにstyleguideというディレクトリが生成されたらOKです。
確認すると、以下のような表示になりました。

下部のViewを選択すると、Pugのコードを確認できます。

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

• htdocs
• src
  • pug
  • styleguide
    • components
      • _preview.pug
      • btn.pug
    • docs
• styleguide
  • スタイルガイドのファイル群
• gulpfile.js
• package.json

【参考サイト】

• fractal のテンプレートをpugにする – Qiita
• GitHub – ressourcenmangel/fractal-pug-adapter: Use Pug templates inside Fractal