gulp文字列バトン(yaml→json→jade→html)

記事追記

改めて記事を追加しました。
(2015/10/19)

物語

極々普通の一般青年HTMLがgulp委員会の力を借りて悪を倒す。

登場人物

gulp

gulp委員会の会長、各人に的確な指示を出す。
リーダーシップのあるイケメン、マジ濡れる。

yaml

gulp委員会の書記、データを完結にまとめるのが得意。
データ管理はおろか、指示書のようなモノも作成できる。
秀才タイプのイケメン、抱いて欲しい。

json

gulp委員会の副会長。各所に顔が利き、実際に指示を伝える。
フレンドリーで誰とでも仲良くなれるイケメン、私をめちゃくちゃにして。

jade

gulp委員会の庶務長。委員会の鉄砲玉として現場で暴れまくる。
優れた運動能力がありつつも、セルフでjsを唱えて効率的に作業を行う。
臨機応変の万能タイプ、正統派イケメン。ホテル予約しちゃった。

html

一般人、そこら辺にうじゃうじゃいる。
薬にも毒にもならないフツメン。
イケメンの力を借りないと、基本的に一人じゃ何もできない。

真面目な説明

データを簡素に記述できるyamlを利用し、ローカル上でhtmlにデータを送ります。

環境構築

node.jsを実装済みとします。

グローバル

グローバルにgulpとjadeが入っていない場合はインストール。

グローバルインストール
npm i -g gulp
npm i -g jade

作業フォルダ

各々必要なライブラリをぶち込みます。

  • gulp
  • gulp-data (dataコマンドを使用)
  • coffee-script
  • gulp-coffee (coffeeで書かせて)
  • gulp-yaml
  • gulp-jade
ライブラリインストール
npm i gulp gulp-data coffee-script gulp-coffee gulp-yaml gulp-jade

gulpfile

ディレクトリ構造は各々で整えてちょんまげ。
データファイルはconfig.ymlとするよ。

/gulpfile.coffee
gulp = require 'gulp'
data = require 'gulp-data'
coffee = require 'gulp-coffee'
yaml = require 'gulp-yaml'
jade = require 'gulp-jade'

#コンパイル前の開発ファイル
dev_path =
jade: './dev/jade/'

#コンパイル後のファイル
build_path =
html: './'
json: './assets/json/'

#yamlコンパイル
gulp.task 'yaml', ->
return gulp.src './*y{,a}ml'
.pipe yaml()
.on('error', console.log)
.pipe gulp.dest('./assets/json/')

#jadeコンパイル
gulp.task 'jade', ['yaml'], ->
gulp.src [
dev_path.jade + '*.jade',
'!' + dev_path.jade + '_*.jade'
]
.pipe data ((file)->
require "#{build_path.json}config.json"
)
.pipe jade(
pretty: true
)
.on('error', console.log)
.pipe gulp.dest build_path.html

#デフォルトタスク
gulp.task('default', ['jade'])

yaml編集

サイトの情報を徒然なるままに記して下さい。

/config.yml (例)
config:

#Site
title: サイト名
subtitle: サブタイトル
description: サイト説明
language: ja

#URL,Root
url: 'http://localhost:4000/'
root: '/'
path_css: '/assets/css/'
path_js: '/assets/js/'
path_icon: '/assets/css/icon/'
path_favicon: '/favicon.ico'
path_feed: '/atom.xml'

#social
github: '//github.com/hatobane'
twitter: '//twitter.com/akanetrip'

#Icon
icon_twitter: ''
icon_facebook: ''
icon_feed: ''

# Miscellaneous
google_analytics: 'UA-64301469-1'
disqus_shortname: akanetrip

gulp-yaml 確認

動くか確認して下さい。

cmd yaml
gulp yaml

jade編集

yamlから変換したjsonを読み込めるか試してみます。

/dev/jade/base.jade
doctype html
html(lang=config.language)
head
//-description
block page_description
meta(name='description', content=config.description)
//-title
title
block window_title
= config.title

body(class=bodyclass)

header#header
h1
a(href=config.root)= config.title

article#content
block content
/dev/jade/index.jade
extends base

block content

.btn
a(href=config.twitter)
i.icon= config.icon_twitter

実行

cmd gulp
gulp

なんということでしょう、json込でjadeがコンパイルされます。

終わりに

jadeとjsonの利用でコードの参照、使い回し、変更が格段に楽になります。
ローカル上で動作を完結できるところも素敵。