SONICMOOV Googleページ

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

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

  • このエントリーをはてなブックマークに追加

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

目次

タスク設定

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

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

@media – CSS | MDN

// パッケージをインポートする
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/' ))
});

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

GitHub – SC5/sc5-styleguide

タスク実行

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

gulp styleguide

SP:
http://localhost:4000

PC:
http://localhost:5000

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

sc5 styleguideでスタイルガイド

サイトのブレを抑えるためのスタイルガイド

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

gulp sass

さいごに

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

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

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

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

参考サイト

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

うさこ(マークアップエンジニア)

ソリューション事業部マークアップエンジニアのうさこです。入社して4年目となりました!ラーメンが大好きなのですが、脂肪という名の悪魔を極力避けるために我慢の日々を過ごしています… ぐぐぐ…

フロントエンドエンジニア募集中!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter SONICMOOV Googleページ
フロントエンドエンジニア募集中!

新着の記事

mautic is open source marketing automation