Help us understand the problem. What is going on with this article?

スタイルガイドジェネレータのsc5-styleguideがいい感じそうだったので試してみた

More than 3 years have passed since last update.

スタイルガイドジェネレータを比べてみたの続き

sc5-styleguideを使ってみました

npm init
npm install sc5-styleguide --save

nodeは公式に書いてないけど5.2.0でやりました
インストール意外と時間かかる

SASSスタイルシートを作ってみる

mkdir test
touch test/test.scss
test.scss
// Button
//
// スタンダードなボタンです.
//
// :hover   - ホバーすると色が変わるよ.
//
// Markup:
// <button class="btn primary">ボタン</button>
//
// Styleguide 1.0.0
.btn.primary {
    background: steelblue;
    color: snow;
    border: 2px outset steelblue;

    &:hover {
      background: yellow;
    }
}

スタイルガイドのトップページを作成する

touch test/overview.md
test/overview.md
## スタイルガイドだよ

gulpfile.jsを作成する

gulpfile.js
var gulp = require('gulp');
var styleguide = require('sc5-styleguide');
var sass = require('gulp-sass');
var outputPath = 'output';

gulp.task('styleguide:generate', function() {
  return gulp.src('test/**/*.scss')
    .pipe(styleguide.generate({
        title: 'My Styleguide',
        server: true,
        rootPath: outputPath,
        overviewPath: 'test/overview.md'
      }))
    .pipe(gulp.dest(outputPath));
});

gulp.task('styleguide:applystyles', function() {
  return gulp.src('test/**/*.scss')
    .pipe(sass({
      errLogToConsole: true
    }))
    .pipe(styleguide.applyStyles())
    .pipe(gulp.dest(outputPath));
});

gulp.task('watch', ['styleguide'], function() {
  // Start watching changes and update styleguide whenever changes are detected
  // Styleguide automatically detects existing server instance
  gulp.watch(['test/**/*.scss'], ['styleguide']);
});

gulp.task('styleguide', ['styleguide:generate', 'styleguide:applystyles']);

公式にあるgulpfileから主にファイルパスを変更してます

package.jsonにscriptを設定しておく

package.json
{
  "name": "test-styleguide",
  "version": "1.0.0",
  "description": "お試しスタイルガイド",
  "main": "",
  "scripts": {
    "start": "./node_modules/.bin/gulp styleguide"
  },
  "author": "",
  "license": "",
  "dependencies": {
    "gulp": "^3.9.0",
    "gulp-sass": "^2.1.1",
    "sc5-styleguide": "^0.3.41"
  }
}

start スクリプトを書いた

実行してみる

npm start

# ブラウザで開く
open http://localhost:3000

できた

1451899252386.png

コメントの制約が厳しい

example.scss
// Section with modifiers # (1)
//
// :hover - hoverすると赤くなります # (2)
//
// Markup:
// <button class="btn primary">Primary</button> # (3)
//
// Styleguide 2.0 # (4)


# (14) の部分について
(1) - セクションタイトル。ヘッダメニュー名となる
(2) - :hover時や他のclassを付与した時の説明
(3) - 実際に使う時のマークアップをhtmlタグを使って記載
(4) - [Styleguide X.X] という形式で書く X.X の部分は数字で2.1.0みたいに書く。桁数は可変にできるが、同じ番号は使えないので注意

SectionMarkup, Styleguideなどは最初を大文字にする必要もあるので注意(間違うと変換対象にしてくれない)

sc5-stylgeduigeの記述方法(Qiita)が分かりやすかったです

shwld
主に開発で得られた知見を記録していきます。 記載された内容は、所属する企業や団体の公式見解ではありません。
https://shwld.net
mof-mof
「つくって人をしあわせにする」をビジョンにAIチャットボットや開発チームレンタル等のサービスを提供している渋谷のIT企業です
https://www.mof-mof.co.jp/about
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away