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

経緯

前の記事のコメントにて改良コードをいただきましたので追記です。
長くなりそうなので、改めて記事を作成しました。
重ね重ねになりますが、情報を授けて下さいました通りますさんありがとうございます。

変更点

以前のコードはyamlから生成したjsonを読み込ませていましたが
今回はgulpfileで変数にyamlをオブジェクトとして格納、それをjadeに送ります。
結果、yamlを直接jadeに投げる形となります。
各駅停車から快速に乗り換えです、素敵ですね。

方法

成功までちょっと苦労したのですが、まずはコードを記します。

環境

node v4+(いちおう[v0.x]でも可能、後述)

グローバル

前回と同様、gulpとjadeを温めておきます。

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

作業フォルダ

ぶち込むライブラリは以下。

  • gulp
  • coffee-script
  • gulp-coffee (coffeeで書かせて)
  • gulp-jade
  • vinyl-yaml-data
  • deep-extend-stream
ライブラリインストール
npm i -D gulp coffee-script gulp-coffee gulp-jade vinyl-yaml-data deep-extend-stream

gulpfile

ディレクトリ構造はお察し下さい。
データファイルとしてconfig.ymlを直下に置きます。

コードが分かってしまえば、前回よりも簡素です。

/gulpfile.coffee
gulp = require 'gulp'
coffee = require 'gulp-coffee'
jade = require 'gulp-jade'
vinylYamlData = require 'vinyl-yaml-data'
deepExtend = require 'deep-extend-stream'

#devディレクトリ
dev_path =
jade: './dev/jade/'
yaml: './'

#buildディレクトリ
build_path =
html: './'

#yamlデータ代入
locals = {}

#yaml読み込みタスク
gulp.task 'yaml', ->
return gulp.src dev_path.yaml + '*y{,a}ml'
.pipe vinylYamlData()
.pipe deepExtend(locals)

#jadeタスク
gulp.task 'jade', ['yaml'], ->
gulp.src [
dev_path.jade + '*.jade',
'!' + dev_path.jade + '_*.jade'
]
.pipe jade(
pretty: true,
locals: locals
)
.pipe gulp.dest build_path.html

yaml

動作確認なので簡単に行きます。

/config.yml (例)
title: 'サイト名'
description: 'サイト説明'

jade

yamlファイル名.プロパティ名でプロパティ値を読み込み。

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

body(class=bodyclass)
h1: a= config.title
/dev/jade/index.jade
extends _base

block window_title
title= config.title

block vars
-var bodyclass = "home"

実行

cmd gulp
gulp jade

お疲れ様でした、以上です。

nodeバージョン

もし[node v0.x]で上記のコードを利用したい場合『vinyl-yaml-data』、『deep-extend-stream』の古いバージョンを指定しインストールして下さい。詳しいバージョンの数字はライブラリのgithubで各々確認をお願い致します。

終わりに

jade,yamlはコードの参照、使い回し、変更に大きな貢献をします、ぜひ。

無知故の愚行

ここからは蛇足となります。

babelって響きかっこいいよね

なにも考えずに『vinyl-yaml-data』と『deep-extend-stream』を導入してみると以下のエラーを吐かれました。

cmd
SyntaxError: Use of const in strict mode.

letやconstというコマンドを耳に触った程度に知っていた私は「ははーん、ES6やな、ははーん」なんて思い「ちゅーことは、gulpとES6で検索で解決やははーん」となって「ははーん、babelといふモノを入れればgulpがES6対応になるんやな」という馬鹿な早合点。

gulp,npmを最新にし、babel注入。しかしrequire(import)の指定ファイルには適応されず、結局エラーは解消されない。

黒幕は手前でしたか

よくよく『vinyl-yaml-data』のreadmeを覗いてみると次の一文を発見。

The latest version requires Node v4+. If you’re using Node v0.x, use v1.1.0.

「……node v4+……だと?」
恐る恐るnodeのバージョンを参照すると、v0.12
そりゃエラーぺっぺされるわな。

nodistが404をのたまう

nodistでnodeのバージョン管理をしていたので、バージョン一覧を確認。
リストに4.xもちゃんと含まれていたので、すかさずセットをしようとするが

cmd
Couldn't fetch 4.2.1: HTTP 404. nodist update

nodeさんや、君は私に何の恨みがあるのかしら。
さらにnodistのアップデートを打っても効かない。
ちかたないのでreadmeを訪れてみると

Migrating from <=0.4 to 0.5

Instead of copying around the executables, there’s now a binary shim (written in go). Prior to 0.4 the global executable was switched everytime you changed the version, now nodist uses a binary shim that makes sure every call to node gets the correct version, so when migrating to 0.5, please make sure that /nodist/bin/node.exe is that shim. You can build the shim yourself from source (nodist/src/shim.go) with nodist/build.bat, but it should come ready with the zip and git packages.

……要するに全部消して、入れなおせという指令。
うわー、面倒くせー。

バージョンリセット

nodistを4=>6にアップデート。無事にnode4は導入できたが、今度はcmdを閉じるとnodistのバージョンセットがリセットされるようになってしまう。
この問題は現在進行形で解決しておらず、cmdを起動するたびにnodistでバージョンを一々指定する羽目に。
なにか設定が必要なのかしら、もし解決策をご存知の方がいらっしゃいましたら、どうかご教授願います。

プロパティ値を呼び出せない

nodistの挙動に不満は残るもgulpfileに着手。
jadeで呼び出しの魔法を唱えるがエラー再び。

変数にオブジェクトを格納しているモノだから、てっきり変数名をjadeに記すのかと思いきや、console.logでオブジェクトを覗いてみるとプロパティ名はなんとymlのファイル名

……いやいや、そっちの方が普通か。私は阿呆か、阿呆だわ。
変数はあくまでgulpタスクに認識させる記号、jadeにはyamlのファイル名を。