nunjucks-php-boilerplate

プロジェクトのセットアップ

docker

$ docker-compose build

nodeパッケージインストール

$ npm install

開発時の手順

Dockerコンテナーを起動

$ docker-compose up -d

Gulpタスクの実行

$ npx gulp

ブラウザで確認

localhost:3000

コーディングチェック

開発時のコーディングチェックには _test.scss を読み込みます。

フォルダ構成

root/
  ├ html/ 納品フォルダ
  │ src/ 開発フォルダ
  │  ├ assets/
  │  │  ├ font/ フォントファイル用
  │  │  ├ css/ Scssファイル用
  │  │  ├ images/ 画像ファイル用
  │  │  └ js/ スクリプトファイル用
  │  └ template/
  │     ├ data/ 各ページの設定（json）
  │     ├ layout/ レイアウト用
  │     ├ page/ ページ別
  │     └ partial/ コンポーネント
  ├ nginx/
  └ php/

Gulpタスク

nunjucks
開発フォルダ内の .njk ファイルから .html ファイルを生成します。

php
開発フォルダ内の _php.njk ファイルから .php ファイルを生成します。

scss
開発フォルダ内の .scss ファイルから .css .min.css を生成します。ファイル名の頭に _(アンダースコア) がついたファイルはコンパイルしません。

js
開発フォルダ内の .es6 ファイルから .min.js を生成します。ファイル名の頭に _(アンダースコア) がついたファイルはコンパイルしません。

images
開発フォルダ内の画像ファイルを圧縮し、納品フォルダにコピーします。

serve
ローカルサーバーを起動します。ローカルサーバーの設定ファイルは /conf.js に記載します。

reload
ブラウザのオートリロードを実行します。