RiotJSでpugを使う

10086 ワード
pug riot riot.js gulp gulp テキストリンク

RiotJS初心者の@dulkappaです.
久々にRiotJS書いてたら, jadeからpugにしてね, みたいなメッセージが出たり浦島状態でした.

パグ可愛いな, おい.

ということで, RiotJS + gulp + pugで書きなおしたときのメモです.
といってもほとんどjadeとpugは記法が変わらないみたいなので, 一瞬だったけど.

ES2016のお作法とかわからないので, わかったらその辺もアップデートしたい.

構成(最小)

riot_sample.
├── gulpfile.js
└── src
    ├── app-todo.tag.pug
    ├── app.js
    └── index.pug

細かいのはリポジトリ見てね.

解説というかただのコード

gulpfile.js

/gulpfile.js
var gulp = require('gulp');
var browserify = require('browserify');
var riotify = require('riotify');
var pug = require('gulp-pug');
var source = require('vinyl-source-stream');
var webserver = require('gulp-webserver');

gulp.task('pug', function() {
  gulp
  .src('src/index.pug')
  .pipe(pug())
  .pipe(gulp.dest('dist/'));
});

gulp.task('browserify', function() {
  browserify({ entries: ['src/app.js'] })
  .transform(riotify, { 'template': 'pug', 'ext': 'tag.pug' })
  .bundle()
  .pipe(source('main.js'))
  .pipe(gulp.dest('dist/'));
});

gulp.task('server', ['browserify', 'pug'], function() {
  gulp
  .src('dist')
  .pipe(webserver({
    livereload: true,
    directoryListining: true,
    open: true
  }));
});

gulp.task('default', ['server']);

riotify使うところですが, タグファイルの拡張子が*.tag.pugなので, extオプションで指定しています.
テンプレートもjadeではなくpugにしてます.

app-todo.tag.pug

/src/app-todo.tag.pug
app-todo
  form(onSubmit="{ add }")
    input(name="input" onkeyup="{ edit }")
    button(disabled="{ !text }") Add

  ul
    li(each="{ items }")
      label(class="{ completed: done }")
        input(type="checkbox" checked="{ done }" onClick="{ parent.toggle }")
        | { title }

  script.
    this.disabled = true;

    this.items = opts.items;

    edit(e) {
      this.text = e.target.value;
    }

    add(e) {
      if (this.text) {
        this.items.push({ title: this.text });
        this.text = this.input.value = '';
      }
    }

    toggle(e) {
      var item = e.item;
      item.done = !item.done;
      return true;
    }

RiotJS Style Guideの内容も少しずつ取り込んでいきたい.
とりあえず<script>タグとファイル名のとこだけ.

app.js

/src/app.js
var riot = require('riot');

require('./app-todo.tag.pug');

riot.mount('app-todo');

タグのマウント用(ここに載せる必要なかった).

index.pug

/src/index.pug
html(lang="ja")

head
  title Riot Sample
  meta(charset='utf-8')

body
  app-todo(items="{ [] }")

  script(src="main.js")

なんかシンタックスハイライトおかしい...

参考