Assemble(grunt-assemble)の設定

grunt-assembleの設定と動作　フロントエンド初心者向け

フロントエンド初心者には、grunt-assembleの設定と動作に関して混乱する場面が多かったので、Assembleの使い方(Grunt task)に加える形で、備忘録がてら投稿致します。

テンプレートエンジンとは

データとテンプレートに分けて管理することで、htmlファイルを分割的に生成する仕組み
つまり、文字列や画像を無視すれば、htmlを部分ごとに使いまわせるだろうという仕組み

grunt-assembleの主な使い方

htmlファイルになるまで

大きな流れとして、下記の順にファイルを読み込む事でhtmlファイルを生成すると考えてください。

1. テンプレートファイル(layout)
2. ページごとのファイル(files)
3. 場合によってパーシャル化されたファイル(partial)

テンプレートファイル：　bodyタグ内以外のテンプレート（head要素, header, footer, パーシャルhbsなど）
ページごとのファイル：　bodyタグ内（この中でパーシャルhbsを呼び出すことも可能）
パーシャル化：　htmlを分割してパーツとして扱うこと

※パーシャル化されたhbsは、テンプレートファイルでもページごとのファイルでも呼び出すことが可能

Gruntfile.jsでの設定

assemble: {
      options: {
        layoutdir: 'src/layout/',
        partials: 'src/include/**/*.hbs',
        data: 'src/**/*.json'
      },
      all: {
        options: {
          layout: 'default.hbs'
        },
        files: [
          {
            expand: true,
            cwd: 'src/html/',
            src: '**/*.hbs',
            dest: 'dist/'
          }
        ]
      }
    }

ディレクトリ構成
src
 ┃
 ┠html/　　ページごとのファイル
 ┠layout/　テンプレートファイル
 ┗include/ パーシャル化されたファイル

1. options: layoutdirに指定されたディレクトリ内のファイル（hbsファイル）をテンプレートとする。
   ※ページごとのhbs上部にyml形式で指定すれば、テンプレートをページごとに変更できる
   ※特に指定がなければ、all: options: layout: に指定されたhbsファイルが基本的なテンプレートとなる。
2. テンプレートhbs内の{{> body}}部分に、all: filesに指定されたディレクトリ（cwd:）配下のファイル（src:）が読み込まれる。
   ※このcwd配下のhbsファイルの数だけ、htmlファイルが生成される。
3. htmlファイル生成先も指定（all: files: dest: ）

これらを理解できれば使用できるかと思います。