Riot.jsを使った、シンプルな通貨コンバータです。Browserifyでプリコンパイルするサンプルとして作ってみました。Yahoo!からAPIで現在の通貨レートを取得して表示するだけ。インクリメンタルサーチができます。(よく考えたら、「コンバータ」ですらないですね)
※この記事は、こちらの日本語版的な内容になります。
試す
GitHub Pagesに置いておきました。Riot.js Currency Calculatorにアクセスしてみてください。
クローンとビルド
手元で試すには、次の手順でどうぞ。
- このリポジトリをクローン
$ npm install$ npm start
Gulp と Browserify
この例では、いくつかのgulpタスクが定義されています。
-
clean: 生成されたファイルを削除する -
browserify:.js,.tagファイルをコンパイル -
css:autoprefixとミニファイほか -
others:index.htmlなど、上記以外のファイルの移動
Browserify の基本的な使い方
riotifyで、.tagファイルのコンパイルが可能です。ちなみに、.tagファイルは、riotで使うテンプレートとスクリプトが一緒になったものです。
gulp.task 'browserify', ->
browserify
entries: [$.app]
debug: true
.transform riotify
.bundle()
.pipe source path.basename $.app
.pipe buffer()
.pipe gulp.dest $.dist
実際には、上記のほかソースマップや圧縮が必要です。詳しくは、gulpfile.coffeeを参照。
CSS *-processors
Riot.jsはCSSプリ/ポストプロセッサには対応していません。
- CSS プリプロセッサ: LESS or Sass
- CSS ポストプロセッサ: autoprefixer
- CSS import, compression, lint, ...ほか
ただ、下記の方法でCSSプロセッサを使うことは可能です。
-
<style>...</style>の部分をbrowserifyタスクで無視 -
<style>...</style>の部分をcssタスクで抽出してstyle.cssに加える
そのために使えるヘルパーがいくつかあります。
transformify
transformifyは、テキストを指定の関数で処理できるトランスフォームです。ここでは、riotifyに渡す前に<style>...</style>を削除しています。
transformify (tag) ->
tag.replace /<style>[\s\S]*<\/style>/gm, ''`
gulp-replace
.tabファイルから、<style>...</style>の部分を抽出して、他のCSSと結合しています。
replace /(^[\s\S]*<style>|<\/style>[\s\S]*$)/gm, ''`
CSSをtagファイルに書く or 書かない
tagファイルに書くと、見通しが良くなります。スタイルやスクリプトが長くなって、全体像が分かりにくくなったら、おそらくコンポーネントを分割するべきです。1ファイルで、HTML, CSS, JavaScriptがわかりやすくまとまっているのが理想的だと思います。
<item>
<span class="title">{ opts.title }</span>
<span class="price">{ opts.price }</span>
<span class="usd">= 1 USD</span>
<style>
item {
display: block;
border-bottom: 1px dotted #ddd;
background: white;
line-height: 2em;
padding: 0 7%;
}
</style>
</item>
ただし、Riot.js単体では今のところ...
- CSSプロセッサが使えない
- 繰り返し要素で、同じ
<style>が出現する
という問題を含んでいます。
なので、上記で紹介した方法をとるか、CSSについては最初から別ファイルに書くのが、しばらくは現実的でしょう。