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")
なんかシンタックスハイライトおかしい...