静的ウェブサイトを制作するためのテンプレートです。

受託開発にありがちな面倒臭さを解消するために、以下のような機能があります。

サブディレクトリのパスを設定することで、開発用サーバーで開かれるページのURLも変更することができます。加えて、HTMLテンプレートから、サブディレクトリを含めたルートパスを作成できるユーティリティー関数を利用できます。

設定方法に関しては、サイトのサブディレクトリの設定を参照してください。

vendor_assets/というディレクトリ以下に、共通ヘッダーや共通CSSなどのファイルを配置すると、開発サーバーから参照することができます。ここに配置されたファイルはdist/以下には格納されません。

SSIを利用したい場合は、gulpfile.babel.jsに以下のように書き加えます。

const serve = done => {
  browserSync.init({
    // 省略
    rewriteRules: [
      {
        match: /<!--#include virtual="(.+?)" -->/g,
        fn(req, res, match, filename) {
          const includeFilePath = path.join('vendor-assets', filename)
          if (fs.existsSync(includeFilePath)) {
            return fs.readFileSync(includeFilePath)
          } else {
            return `<span style="color: red">\`${includeFilePath}\` could not be found</span>`
          }
        }
      }
    ],
    // 省略
  }, done)
}

全てのテンプレートファイル（src/html/**/*.pug）に、ファイルの配置に対応するページのデータとページのURLを提供します。

ページに対応するテンプレートファイルと同名のJSONファイルを作成することで、そのページにのみ適応されるデータを作成することができます。src/html/index.pugにのみ提供するデータを作成したいときは、src/html/index.jsonというファイルを作成します。

src/html/metadata.jsonのみは例外で、全てのテンプレートファイルに適応されるデータです。

テンプレート側からページのURLを参照するために、以下の変数・データを提供しています。

src/htmlから見た相対パスを提供する変数です。例えば、src/html/subdir/page.pugというファイルには、/subdir/page.htmlを提供します。index.pugというファイル名の場合のみ例外で、/という値を提供します。

プロジェクトに設定されたサブディレクトリを含めたルートパスを返す関数です。urlFor('css/main.css')という風にすると、/path/to/project/css/main.cssという値が返ります。urlFor(currentPath)とすることで、現在のページまでのルートパスが取得できます。

詳しくはgulpfile.babel.jsのhtmlというタスクを参照してください。

参考：静的サイト制作のための便利なHTML開発環境の作り方 - ライデンの新人ブログ

開発用にコンパイルされたファイルは.tmp/以下に、納品用のファイルはdist/以下に格納されます。dist/以下のファイルをGitのコマンドで差分を取れば、差分納品用のZIPが作成できます。納品用のビルドは、コミットごとに自動的に実行されます。

以下のようなコマンドで、HEADと<commit>の差分Zipがarchive/htdocs.zipとして作成されます。

yarn archive -- --commit <commit>

HEAD以外のコミットとの差分を取りたい場合は以下のようにします。

yarn archive -- --commit <old-commit> --commit <new-commit>

この方法では不十分な場合は、以下のようなコマンドが参考になります。

git archive --format=zip --prefix=htdocs/ HEAD:dist/path/to/project `git diff --diff-filter=AMCR --name-only <prev-commit> HEAD | grep "^dist/path/to/project/" | sed -e "s/dist\/path\/to\/project\///"` > ~/Desktop/htdocs.zip

git diff --name-only --diff-filter=AMCR <prev-commit> | grep "^dist/path/to/project/" | sed -e "s/dist\/path\/to\/project\///" > ~/Desktop/filelist.txt

参考：ビルドの生成物をGitのリポジトリに含めたいときの問題点の改善例 - ライデンの新人ブログ

yarn

package.jsonのprojectConfig.baseDirに、サイトが公開されるサブディレクトリを設定します。

"projectConfig": {
  "baseDir": "path/to/project"
},

ルートなら以下のようにします。

"projectConfig": {
  "baseDir": ""
},

yarn start

上記のコマンドを実行することで、開発用サーバーが立ち上がり、ファイルの変更が監視されるようになります。

pre-commitを利用したフックによって、コミットごとに自動的に納品用のビルドが実行されます。

.
├── README.md
├── dist
│   └── path
│       └── to
│           └── project
│               ├── about.html
│               ├── css
│               │   └── app.css
│               ├── index.html
│               └── js
│                   └── app.js
├── gulpfile.babel.js
├── package.json
├── src
│   ├── css
│   │   ├── _base.scss
│   │   ├── _function.scss
│   │   ├── _var.scss
│   │   └── index.scss
│   ├── html
│   │   ├── about.json
│   │   ├── about.pug
│   │   ├── index.json
│   │   ├── index.pug
│   │   ├── metadata.json
│   │   └── partial
│   │       ├── global-header.pug
│   │       ├── head.pug
│   │       └── scripts.pug
│   ├── img
│   ├── js
│   │   ├── index.js
│   │   └── utils.js
│   └── static
├── vendor-assets
├── webpack.config.js
└── yarn.lock

14 directories, 23 files

ECSSが現実的なCSS設計のパターンだと考えており、それを利用することを推奨します。

ファイルの配置としては、src/css/components/namespace/Component.scssという風にします。

参考：最近の僕のCSSとの向き合い方 - yuhei blog

Webpackでモジュールシステムをシンプルに利用するために、全てのページで一枚のJavaScriptを読み込んで実行するという形にしています。そのため、ページごとに実行するJavaScriptの処理を切り分けるために、このテンプレートではPageDispatcherを利用しています。

src/js/main.jsには以下のように記述します。

dispatcher.on('home', () => {
  console.log('home')
})

HTMLテンプレート側には以下のように記述します。

body(data-page-type="home")

処理が巨大化してきた場合、以下のようにファイルを分割することができます。それぞれのファイルは、読み込んだだけでは副作用を起こさないようにします。

src/js/main.js

// 静的に`require`しないとwebpackで依存関係を解決できない
dispatcher.on('home', require('./pages/home').default)
dispatcher.on('about', require('./pages/about').default)
dispatcher.on('products', require('./pages/products').default)
dispatcher.on('products/foods', require('./pages/products/foods').default)
dispatcher.on('products/drink', require('./pages/products/drink').default)

src/js/pages/home.js

import {$} from '../utils.js'

export default () => {
  // ここにページ固有の処理を書く
}

参考：ページごとにJSの処理を分割するためのよさそうな方法 - ライデンの新人ブログ

webpack.config.jsのentry.appにパッケージ名を追加してください。

src/static/imgに画像ファイルを配置すると、圧縮されずに単にコピーされます。圧縮後の画像ファイルをキャッシュして、毎回のビルド時間を短縮できます。

dist/及びvendor_assets/以下のファイルをサーバーへコピーすることで反映できます。

MIT