Riot.jsのHTML部分をJadeで書いてgulpするメモ

普段Railsでhamlを使っていた身としては、
どうせコンパイルするのなら、slimとかJadeとかインデントで書いてスッキリしたいよね。
ってことでRiot.jsはJadeで書けます！

Jadeだとこんな感じで書ける

scriptの後に.（ドット）を付けるとベタ書きできる

jade(hello.tag)

hello
  h1#title.center {title}
  ul.list(each="{content, i in contents}")
    li(class="{even: (i % 2 === 0)}")
      p.number {content}

  script.
    this.title = "HELLO"
    this.contents = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

必要になるnpmパッケージ

jadeとriotも忘れずに

json(package.json)

"dependencies": {
  "jade": "1.9.2",
  "gulp": "3.8.11",
  "gulp-riot": "0.2.14",
}

gulpのタスク

{template: "jade"}ってするのがポイント

coffeescript(gulpfile.coffee)

gulp.task "riot", ->
  gulp.src [
    "hello.tag"
  ]
  .pipe riot {template: "jade"}
  .pipe gulp.dest "hello.js"

実行しておわり

ね、簡単でしょ？