静的サイト生成フレームワーク「Assemble」を使ってみよう
簡単なページを作るトコまで。
Assemble？
Gruntを使って静的サイトを制作するためのフレームワーク。RubyのMiddlemanや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/へアクセスしてみましょう！このようなページができてるハズッ...
おおおおおおおお
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みたく）
