RiotJS에서 pug 사용

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")

뭔가 신택스 하이라이트 재미 ...

참고

riot_sample (개인 실험용 리포지토리)

RiotJS Style Guide

gulp-pug

【Pug】고릴라에서도 알 수 있는 Jade 다시 Pug 입문