Assemble

@Takazudo

なにそれ

• Assemble
• Gruntのプラグイン
• jekyllみたいなやつ
• でももっとお手軽

どのへんが良いのか

• フロント技術だけでかなりいける
• Handlebars + Grunt + JSON
• YAMLも使える
• つまりお手軽

お手軽度

• ただのHTML
• Assemble ←★
• jekyll
• Dreamweaver template
• WordPress
• すごいCMS

すごい単純な例

    ├── Gruntfile.coffee
    ├── config.yml
    ├── package.json
    ├── pagesrc
    │   └── 1.hbs
    └── result
            └── 1.html

• sample code (step1-simple)

Gruntfile.coffee

module.exports = (grunt) ->
  grunt.task.loadNpmTasks 'assemble'
  grunt.initConfig
    assemble:
      pages:
        options:
          data: ['config.yml']
        files: [
          {
            src: 'pagesrc/1.hbs'
            dest: 'result/1.html'
          }
        ]
  grunt.registerTask 'default', ['assemble']

pagesrc/1.hbs

My name is {{ config.name }}.

config.yml

name: Takazudo

Grunt!

$ grunt

result/1.html

My name is Takazudo.

もうちょっと何かしてみる

├── Gruntfile.coffee
├── config.yml
├── package.json
├── pagesrc
│   └── 1.hbs
├── partials
│   └── products.hbs
└── result
    └── 1.html

• sample code (step2-partials)

Gruntfile.coffee

module.exports = (grunt) ->
  grunt.task.loadNpmTasks 'assemble'
  grunt.initConfig
    assemble:
      options:
        partials: 'partials/*.hbs'
      pages:
        options:
          data: ['config.yml']
        files: [
          {
            src: 'pagesrc/1.hbs'
            dest: 'result/1.html'
          }
        ]
  grunt.registerTask 'default', ['assemble']

pagesrc/1.hbs

---
title: hogehogeTitle
description: This page is cool!
---
This page's title is {{ title }}.
{{ description }}
My name is {{ config.name }}.
{{> products }}

config.yml

name: Takazudo
products:
  - name: gyudon
    price: 200
  - name: katsudon
    price: 300

partials/products.hbs

{{#each config.products}}
- {{ name }} is {{ price }} yen
{{/each}}

Grunt!

$ grunt

result/1.html

This page's title is hogehogeTitle.
This page is cool!
My name is Takazudo.

- gyudon is 200 yen

- katsudon is 300 yen

その他出来ること

• ディレクトリまるっとコンパイル
• レイアウトテンプレ機能
• 別のテンプレエンジン使用
• Markdown

ちょろっと作るのには便利

JSのナレッジ使えるのが良い