読者です 読者をやめる 読者になる 読者になる

Milk+ea

Weblog Is My Hobby.

静的サイト生成フレームワーク「Assemble」を使ってみよう

Assemble Grunt

f:id:totora0155:20140811065230p:plain

簡単なページを作るトコまで。

Assemble

Gruntを使って静的サイトを制作するためのフレームワークRubyMiddlemanやjekyllみたいなの。

インストールとGrunt設定

npm initで package.jsonを作成しておいた後、Assembleらプラグインをインストールします。

npm i --save-dev grunt grunt-contrib-connect grunt-contrib-watch assemble

終わったら同じディレクトリでGruntfile.jsファイルを作成します。

module.exports = function(grunt) {
  grunt.initConfig({
    connect: {
      demo: {
        options: {base: 'src'}
      }
    },

    assemble: {
      options: {layoutdir: 'src/docs/layout'},
      watch: {
        expand: true,
        cwd: 'src/docs/page',
        src: ['**/index.hbs'],
        dest: '<%= connect.demo.options.base %>'
      }
    },

    watch: {
      assemble: {
        files: ['src/docs/**/*.hbs'],
        tasks: 'assemble'
      }
    }
  });

  grunt.registerTask('default', ['connect', 'watch']);

  grunt.loadNpmTasks('grunt-contrib-connect');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('assemble');
};

docsディレクトリ下の.hbsファイルが変更されるたびにassembleタスクを実行し、srcディレクトリに.htmlファイルを作ります。
実行はコマンドラインgrunt・・・でOKです。

ディレクトリ構造はこんな感じにします。

├ node_modules
├ Gruntfile.js
├ package.json
└ src
   └ docs
       ├ layout - layout.hbs
       └ page - index.hbs

ページになるファイルを作る

layout.hbsとindex.hbsファイルを作成します。まずlayout.hbs。

<!DOCTYPE html> 
<html lang ="js"> 
  <head> 
    <meta  charset="utf-8"> 
    <title>{{title}} | Assembleを使ってみよう</title> 
  </head> 
  <body> 
    {{> body}} 
  </body> 
</html> 

テンプレートエンジンはデフォルトでHandlebarsを使います。

途中のヘンな所は次のとおり。

  • {{}}は変数展開
  • {{>}}はパーシャル(今回は使わない)埋込
  • {{> body}}は呼び出し元に記述した内容を埋込

index.hbs。

---
layout: layout.hbs
title: Hello Assemble
---
<main>
<h1>Hello!! Assemble</h1>
<p>ハロー!!アセンブル</p>
</main>

{{> body}}へ埋め込む内容を記述します。

ページ上部にある---で囲ってる部分はFrontMatterと言ってYAML形式で変数などを決めれます。
例えばtitle: ***とするとHTMLができた時、{{title}}}だった所は***に変わります。

layoutでは、埋め込み先ファイルを指定します。
Gruntfile内のassemble.options.layoutdirでlayoutファイルを置いているディレクトリを設定することで、layout.hbsと書くだけで良くなっています。

index.hbsファイルを保存しgruntが実行されているならコマンドラインで処理が行われます。

>> File "src\docs\page\index.hbs" changed.
Running "assemble:watch" (assemble) task
Assembling src/index.html OK
>> 1 pages assembled.

http://localhost:8000/へアクセスしてみましょう!このようなページができてるハズッ... hello!! Assemble ページ

おおおおおおおお

HTMLはこうなってます。

<!DOCTYPE html>
<html lang ="js">
  <head>
    <meta  charset="utf-8">
    <title>Hello Assemble | Assembleを使ってみよう</title>
  </head>
  <body>
    
<main>
<h1>Hello!! Assemble</h1>
<p>ハロー!!アセンブル</p>
</main>
  </body>
</html>

ちなみにGruntfileでassemble.watch.src['**/index.hbs']とすると、page/about/index.hbsファイルを作った時にsrc/about/index.htmlとディレクトリ構造を保ったままHTMLファイルを作ることができます。そして、http://localhost:8000/aboutのような綺麗なURLでアクセスできるっていう!(Middlemanの綺麗なURLみたく)