Website Template

静的なWebサイトを作るためのテンプレートです。
なるべく多くの人が使えて、少しモダンな制作環境になることを目指しています。

以下のページで詳しく確認できます。

• Styleguide
• document/
  • css.md
  • html.md
  • image.md
  • js.md
  • icon.md
  • https.md

確認環境

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

• macOS High Sierra 10.13.6
• Node.js 10.16.0

Node.jsのバージョンはnodenvで固定しています。

始め方

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

npm install

ファイル構成

開発はsrcディレクトリでおこない、テスト用の一時ファイルはhtdocsディレクトリに出力されます。
staticディレクトリは、Gulpの処理は必要ないけれど、ファビコンや共通ファイルのような最終的にhtdocsディレクトリに含めたいファイルを置きます。
templateディレクトリはPugファイルのテンプレートです。このテンプレートを元にファイルを作成してください。

root/
├── src/
│   ├── _data/
│   │   └── ja/
│   │       └── site.json
│   ├── _mixin/
│   │   ├── _all.pug
│   │   ├── _breadcrumb.pug
│   │   └── _picture.pug
│   ├── _partial/
│   │   ├── _script.pug
│   │   └── ja/
│   │       ├── _footer.pug
│   │       ├── _header.pug
│   │       └── _meta.pug
│   ├── _template/
│   │   └── ja/
│   │       └── _default.pug
│   ├── about/
│   │   └── index.pug
│   ├── assets/
│   │   ├── css/
│   │   │   ├── base/
│   │   │   │   ├── variable/
│   │   │   │   ├── function/
│   │   │   │   ├── mixin/
│   │   │   │   ├── _normalize.scss
│   │   │   │   └── _base.scss
│   │   │   ├── namespace/
│   │   │   │   ├── sitewide/
│   │   │   │   ├── structure/
│   │   │   │   ├── layout/
│   │   │   │   ├── home/
│   │   │   │   └── top/
│   │   │   ├── _print.scss
│   │   │   ├── site.scss
│   │   │   └── styleguide/
│   │   ├── svg/
│   │   ├── img/
│   │   │   ├── sitewide/
│   │   │   ├── structure/
│   │   │   └── namespace/
│   │   └── js/
│   │       ├── site.js
│   │       ├── polyfill.js
│   │       ├── util.js
│   │       └── namespace/
│   │           ├── data/
│   │           └── js/
│   └── index.pug
├── static/
├── template/
│   ├── index.html
│   ├── ssi/
│   ├── ja/
│   └── en/
├── htdocs/
├── document/
│   ├── css.md
│   ├── html.md
│   ├── image.md
│   ├── js.md
│   └── icon.md
├── aigis/
├── config/
├── README.md
├── package.json
└── gulpfile.js

開発用タスク

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

npm start

本番環境用にビルドする場合は以下のコマンドを実行します。

npm run release

本番環境の動作を検証したい場合は以下のコマンドを実行します。

npm test

HTML・CSS・JSの整形とリントをまとめて実行します。
（少なくとも）エラーが出ない状態にしてからプッシュします。

npm run lint

HTMLHintとgulp-w3cjsでHTMLのリントとW3Cのバリデーションを実行します。

npm run htmlValidate

stylelint-config-standardを元にSassのリントを実行します。

npm run stylelint

Airbnb JavaScriptスタイルガイドやeslint-plugin-vueを元にJavaScriptのリントを実行します。

npm run eslint

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

• PugをHTMLにコンパイル
• SassをCSSにコンパイル
• JSをES5にコンパイル（Vue.jsの単一ファイルコンポーネントも変換する）
• SVGスプライトの生成
• ローカルサーバーを立ち上げて動作の確認（static以下のHTMLファイルはSSIにも対応）
• HTMLのリント
• Sass（CSS）のリント
• JavaScriptのリント
• スタイルガイドの生成

対象ブラウザ

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

• IE11以降
• iOS11以降
• Android5.1以降
• その他ブラウザは最新版

browser-syncをhttpsで起動する

APIの実行にhttps環境が必要な場合は、以下の設定が必要です。以降の設定はmacOSでの動作を確認しています。

.env.example（.envのサンプルファイル）から.envを作成します。

cp .env.example .env

.envのHTTPS_KEYとHTTPS_CERTに証明書へのパスを設定します。.env内の#以降がコメントになります。

#browser-syncで`https`オプションを使用する場合にコメントを解除します
#証明書の発行方法はドキュメント「https」を参照してください
#HTTPS_KEY=/Users/<ユーザー名>/<IPアドレス>-key.pem
#HTTPS_CERT=/Users/<ユーザー名>/<IPアドレス>.pem

証明書の発行方法は以下のドキュメントを参照してください。

https.md