iwbc/website-coding-kit


Gulpによるフロントエンド開発の効率化キット

License: WTFPL

Language: CSS


Website Coding Kit v1.5.2

動作要件

Website Coding Kitの実行には以下のツールが必要です。
実行環境にインストールされていない場合は、各ツールのWebサイトからインストールしてください。

セットアップ

プロジェクトの新規開始、またはプロジェクトのリポジトリをクローンして再開する場合には、以下のコマンドを実行して、Website Coding Kitのセットアップを行います。

yarn run init

各種設定

Website Coding Kitの動作設定は、/gulpconfig.jsに記述されています。
基本的に変更する必要はありませんが、変更する場合は、当該ファイルのコメントを確認してください。

使い方

ビルド

以下のビルドを一括して行います。

  • スプライトシートの生成
  • Bowerパッケージの統合
  • EJS/Sass/JSのコンパイル
  • 画像の最適化
  • /destディレクトリへのファイルのコピーなど

開発用ビルド

開発用のビルドを行います。
デフォルトの設定は、以下のとおりです。

  • CSS/JSのMinify化 : 無効
  • BowerパッケージのMinify化 : 有効
  • SourceMapの出力 : 有効

destディレクトリ内の状態を最新にするため、開発前やリポジトリをpullした後には、必ずビルドを行ってください。

yarn run build

本番用ビルド

開発用ビルドコマンドに-- --env=productionのオプションを付与することで、本番用のビルド設定に従ったビルドを行います。
デフォルトの設定は、以下のとおりです。

  • CSS/JSのMinify化 : 無効
  • Bowerパッケージ/ModernizrのMinify化 : 有効
  • SourceMapの出力 : 無効
yarn run build -- --env=production

ファイルの更新監視とWebサーバーの起動

ファイル更新監視の開始とWebサーバーの起動を行います。
ファイルの更新を検知すると、ビルドとページのリロードが行われます。

yarn run start

Bowerパッケージのインストール

Bowerパッケージをインストールするには、以下のコマンドを実行します。
※ Bowerがインストールされている必要があります。

bower install --save {package-name}
yarn run bower

なお、出来るだけパッケージのバージョンを固定するために、bower.jsonに記述されているパッケージのバージョン表記の先頭から^を取り除くことを推奨します。

Modernizrのビルド

設定およびJS/SCSSからModernizrのビルドを行うには、以下のコマンドを実行します。

yarn run modernizr

スプライトシートの生成

/src/assets/sprites直下のディレクトリごとに、スプライトシートとスプライトシート用のSassファイルを出力します。

/src/assets/spritesディレクトリにsample2xディレクトリを作成し、この中にdown.pngup.pngを入れた場合は、/src/assets/imagesディレクトリにsample2x.pngというスプライトシートと、/src/assets/sass/foundations/spritesディレクトリに_sample2x.scssファイルが出力されます。

Retina用のスプライトシートを生成する場合は、スプライトシートのディレクトリ名の末尾に2xを付与してください。

MixinまたはClassを使用して、スプライト画像を表示できます。

Mixinを使用してスプライト画像を表示する
// @include sprite("{スプライトシートディレクトリ名}-{スプライト画像ファイル名}", {表示倍率});

.element {
	// 否Retina用スプライトシートの画像を表示する(等倍表示)
	@include sprite("sample-down");
}

.element2x {
	// Retina用スプライトシートの画像を表示する(0.5倍表示)
	@include sprite("sample2x-down", .5);
}
Classを使用してスプライト画像を表示する
<!-- m-sprite_{スプライトシートディレクトリ名}-{スプライト画像ファイル名} -->

<!-- 否Retina用スプライトシートの画像を表示する(等倍表示) -->
<span class="m-sprite_sample-down"></span>

<!-- Retina用スプライトシートの画像を表示する(0.5倍表示) -->
<span class="m-sprite_sample2x-down"></span>

主要ファイル構成

┣ dest/ # 公開用データディレクトリ。
┣ docs/
┃  ┗ sass/ # 組込済Sassファイルについてのドキュメントディレクトリ。
┣ mock/ # モックサーバの設定ディレクトリ。
┣ src/ # ソースデータディレクトリ。
┃  ┣ assets/
┃  ┃  ┣ css/
┃  ┃  ┃  ┗ sanitize.css
┃  ┃  ┣ fonts/ # Webフォントディレクトリ。
┃  ┃  ┃  ┗ NotoSansCJKjp-* # 第一水準漢字までのサブセット化済みのNoto Sans JPのWebフォントファイル。
┃  ┃  ┣ images/
┃  ┃  ┣ js/
┃  ┃  ┣ sass/ # 以下、FLOCSSベースのCSS設計ガイドラインに準拠しています。
┃  ┃  ┃  ┣ foundations/
┃  ┃  ┃  ┣ layouts/
┃  ┃  ┃  ┣ objects/
┃  ┃  ┃  ┣ vendors/ # ライブラリなど第三者制作のスタイルはここに保存します。
┃  ┃  ┃  ┗ style.scss
┃  ┃  ┣ sprites/
┃  ┃  ┗ vendors/ # ライブラリなど第三者制作のJSはここに保存します。
┃  ┃      ┗ libs.js # 各Bowerパッケージのmainファイルは、このファイルとして統合して出力されます。
┃  ┗ index.ejs
┗ gulpconfig.js # Website Coding Kitの動作設定ファイル。

Gitリポジトリで空のディレクトリを保持するため、.gitkeepファイルだけが入っているディレクトリがあります。
何らかのファイルをこのディレクトリに追加した場合は、.gitkeepファイルを削除してください。

ドキュメント

SassDoc

Website Coding Kitに組込済Sassファイルの仕様については、/docs/sass/index.htmlを確認してください。

FLOCSS

Website Coding Kitに組込済のSassファイル構成は、FLOCSSベースのCSS設計ガイドラインに準拠しています。

Project Statistics

Sourcerank 3
Repository Size 14.6 MB
Stars 0
Forks 0
Watchers 1
Open issues 0
Dependencies 986
Contributors 1
Tags 23
Created
Last updated
Last pushed

Top Contributors See all

Dai Iwabuchi

Recent Tags See all

2.8.0 May 04, 2018
2.7.0 February 27, 2018
2.6.0 February 26, 2018
2.5.0 February 06, 2018
2.4.1 January 31, 2018
2.4.0 January 29, 2018
2.3.1 January 22, 2018
2.3.0 January 19, 2018
2.2.1 January 15, 2018
2.2.0 December 05, 2017
2.1.0 November 24, 2017
2.0.0 November 22, 2017
1.5.2 April 13, 2017
1.5.1 April 12, 2017
1.5.0 April 11, 2017

Something wrong with this page? Make a suggestion

Last synced: 2017-10-22 16:09:28 UTC

Login to resync this repository