拡張しやすいWebサイトのためのテンプレートです。
ページ単位でのデザインをしない、コンポーネントベースでの制作を想定しています。

以下の環境で動作の確認をしています。

• OS X 10.11.5(El Capitan)
• Node.js 4.2.4
• Yarn 0.21.3

Yarnをインストールしていない場合はグローバルにインストールしてください。

npm install -g yarn

詳しくは公式ドキュメントを参照してください。

開発に必要なパッケージなどは以下のコマンドですべてインストールされます。クローン、またはダウンロードをしたあとに実行してください。

yarn install

開発はdevelopディレクトリでおこない、テスト用の一時ファイルはtestディレクトリに出力、公開用のファイルはhtdocsディレクトリに出力されます。
publicディレクトリは処理は必要ないけれど、ファビコンのようなサイト制作に必要なファイルを置きます。

root/
├── README.md
├── aigis/
├── develop/
│   ├── _data/
│   │   └── site.json
│   ├── _include/
│   │   ├── _meta.pug
│   │   ├── _script.pug
│   │   └── _layout.pug
│   ├── assets/
│   │   ├── css/
│   │   │   ├── base/
│   │   │   ├── atoms/
│   │   │   ├── molecules/
│   │   │   ├── organisms/
│   │   │   ├── templates/
│   │   │   ├── pages/
│   │   │   ├── styleguide/
│   │   │   └── common.scss
│   │   ├── icon/
│   │   │   └── template/
│   │   ├── img/
│   │   └── js/
│   │       ├── common/
│   │       ├── jquery-2.2.0.min.js
│   │       └── module/
│   └── index.pug
├── gulpfile.js
├── package.json
├── yarn.lock
└── public/

以下のコマンドを実行すると、開発に必要なGulpのタスクがすべて実行されます。

yarn start

以下のような処理がおこなわれます。

• PugをHTMLにコンパイル
• SassをCSSにコンパイル
• JSを連結・圧縮
• アイコンフォントの生成
• ローカルサーバーを立ち上げて動作の確認
• スタイルガイドの生成

詳しい説明はyarn startを実行後、/styleguideにアクセスして確認してください。

以下のコマンドを実行すると、本番公開用のファイルが出力されます。

yarn run release

デフォルトでは下記のようなブラウザを対象にしています。

• IE9以降
• iOS8以降
• Android4.4以降
• その他ブラウザは最新版