gulp で sc5-styleguide を使ってスタイルガイドを開発の sass で同期する方法実行編

うさこ

2017.03.07

Webフロントエンド

こちらの記事は「gulp で sc5-styleguide を使ってスタイルガイドを開発の sass で同期する方法その1」の続きです！

目次
タスク設定
タスク実行
さいごに
参考サイト

タスク設定

gulpfile.js はざっとこのような感じになりました！
今回はスタイルガイドを PC/SP で分けるような作りにしています。

レスポンシブにしたい場合は、PC 版の記述を削って src ディレクトリにある common.scss 内で @media の記述を加えてあげると実現できると思います！

@media – CSS | MDN

[sourcecode lang="javascript"]
// パッケージをインポートする
var gulp = require( 'gulp' );
var sass = require('gulp-sass');
var styleguide = require('sc5-styleguide');

// ディレクトリ設定
var dir = {
    src: 'src', // src フォルダ置き換え
    dev: 'dev', // dev フォルダ置き換え
    dist: 'dist', // dist フォルダ置き換え
    styleguide: 'styleguide' // styleguide フォルダ置き換え
}

// スタイルガイド 生成
// SP版
gulp.task('styleguide-sp-generate', function() {
    return gulp.src([
        dir.src + '/assets/scss/common.scss'
    ])
    .pipe(styleguide.generate({
        title: 'Styleguide for SP',
        server: true,
        port: 4000,
        rootPath: dir.styleguide + '/sp/',
        overviewPath: dir.styleguide + '/sp/OVERVIEW.md'
    }))
    .pipe(gulp.dest( dir.styleguide + '/sp/' ));
});
// PC版
gulp.task('styleguide-pc-generate', function() {
    return gulp.src([
        dir.src + '/assets/scss/common_pc.scss'
    ])
    .pipe(styleguide.generate({
        title: 'Styleguide for PC',
        server: true,
        port: 5000,
        rootPath: dir.styleguide + '/pc/',
        overviewPath: dir.styleguide + '/pc/OVERVIEW.md'
    }))
    .pipe(gulp.dest( dir.styleguide + '/pc/' ));
});

// スタイルガイド 読み込み用 styleguide.css 生成
// SP版
gulp.task('styleguide-sp-style', function() {
    return gulp.src([
        dir.src + '/assets/scss/common.scss'
    ])
    .pipe(sass({
        errLogToConsole: true
    }))
    .pipe(styleguide.applyStyles())
    .pipe(gulp.dest( dir.styleguide + '/sp/'));
});
// PC版
gulp.task('styleguide-pc-style', function() {
    return gulp.src([
        dir.src + '/assets/scss/common.scss'
        dir.src + '/assets/scss/common_pc.scss'
    ])
    .pipe(sass({
        errLogToConsole: true
    }))
    .pipe(styleguide.applyStyles())
    .pipe(gulp.dest( dir.styleguide + '/pc/'));
});

// スタイルガイド コンパイル
gulp.task('styleguide', [
    'styleguide-pc-generate',
    'styleguide-pc-style',
    'styleguide-sp-generate',
    'styleguide-sp-style'
]);

// sass コンパイル
gulp.task('sass', function () {
    return gulp.src( dir.src + '/assets/scss/{,**/}*.scss' )
    .pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError))
    .pipe(gulp.dest( dir.dev + '/assets/css/' ))
});

[/sourcecode]

[sourcecode lang="javascript"]

// パッケージをインポートする

var gulp = require( 'gulp' );

var sass = require('gulp-sass');

var styleguide = require('sc5-styleguide');

// ディレクトリ設定

var dir = {

src: 'src', // src フォルダ置き換え

dev: 'dev', // dev フォルダ置き換え

dist: 'dist', // dist フォルダ置き換え

styleguide: 'styleguide' // styleguide フォルダ置き換え

}

// スタイルガイド生成

// SP版

gulp.task('styleguide-sp-generate', function() {

return gulp.src([

dir.src + '/assets/scss/common.scss'

])

.pipe(styleguide.generate({

title: 'Styleguide for SP',

server: true,

port: 4000,

rootPath: dir.styleguide + '/sp/',

overviewPath: dir.styleguide + '/sp/OVERVIEW.md'

}))

.pipe(gulp.dest( dir.styleguide + '/sp/' ));

});

// PC版

gulp.task('styleguide-pc-generate', function() {

return gulp.src([

dir.src + '/assets/scss/common_pc.scss'

])

.pipe(styleguide.generate({

title: 'Styleguide for PC',

server: true,

port: 5000,

rootPath: dir.styleguide + '/pc/',

overviewPath: dir.styleguide + '/pc/OVERVIEW.md'

}))

.pipe(gulp.dest( dir.styleguide + '/pc/' ));

});

// スタイルガイド読み込み用 styleguide.css 生成

// SP版

gulp.task('styleguide-sp-style', function() {

return gulp.src([

dir.src + '/assets/scss/common.scss'

])

.pipe(sass({

errLogToConsole: true

}))

.pipe(styleguide.applyStyles())

.pipe(gulp.dest( dir.styleguide + '/sp/'));

});

// PC版

gulp.task('styleguide-pc-style', function() {

return gulp.src([

dir.src + '/assets/scss/common.scss'

dir.src + '/assets/scss/common_pc.scss'

])

.pipe(sass({

errLogToConsole: true

}))

.pipe(styleguide.applyStyles())

.pipe(gulp.dest( dir.styleguide + '/pc/'));

});

// スタイルガイドコンパイル

gulp.task('styleguide', [

'styleguide-pc-generate',

'styleguide-pc-style',

'styleguide-sp-generate',

'styleguide-sp-style'

]);

// sass コンパイル

gulp.task('sass', function () {

return gulp.src( dir.src + '/assets/scss/{,**/}*.scss' )

.pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError))

.pipe(gulp.dest( dir.dev + '/assets/css/' ))

});

[/sourcecode]

その他、sc5-styleguide のオプションはこちらを参考にしてみてください！

GitHub – SC5/sc5-styleguide

タスク実行

styleguide タスクを走らせると、それぞれのポート番号に対応したパスでアクセスができるようになります。

[sourcecode]
gulp styleguide
[/sourcecode]

[sourcecode]

gulp styleguide

[/sourcecode]

SP：
http://localhost:4000

PC：
http://localhost:5000

このような形でスタイルガイドを確認することができます！

sass タスクを走らせると dev ディレクトリに css ファイルがコンパイルされていることが確認できます！

[sourcecode]
gulp sass
[/sourcecode]

[sourcecode]

gulp sass

[/sourcecode]

さいごに

1点だけモヤっとする部分があります。

styleguide ディレクトリの各フォルダを見てみると、src ディレクトリの scss がコピーされてきていますが… たぶん不要なファイルです。

del タスクでこの不要なファイルを削除するなりしてスッキリしましょう。

以上、生きたスタイルガイドの導入方法の紹介でした！
皆さまのお役に立てれば幸いでございます… （´ω｀*）

参考サイト

SC5 Style Guide Generator
http://styleguide.sc5.io/
スタイルガイドジェネレーターのsc5-styleguideを使ってみた – Snaplog
https://blog.mismithportfolio.com/web/20160806sc5styleguide
スタイルガイドジェネレータのsc5-styleguideがいい感じそうだったので試してみた – Qiita
http://qiita.com/shwld/items/188fd8495ada8e6d3125