riot.js用のボイラープレート的な何かです。gulpで一通りのビルドができるよう構成しています。
- $ npm install （初回のみ）
- $ npm run watch
→ブラウザが立ち上がってサンプルが表示されます。 終了する時はCtl-Cで。
下記のモジュールをグローバルインストールすることを推薦します。 （但し、ここに書いてある範囲の使い方であれば、恐らくは不要です）
- babel-core@6.23.1
- $ npm install -g babel-core
- gulp@3.9.1
- $ npm install -g gulp
- npm run watchしている状態でsrcディレクトリ内を編集します
- 変更は自動でビルドされ、ブラウザに反映されます
- ビルドされたものはdistディレクトリに出力されます
- エラーでビルドに失敗するとデスクトップに通知が出ます
- たまにブラウザの自動同期が動かなくなることがあるかも？
- その場合はお手数ですがCtl-Cで一旦落としてnpm run watchを再実行してください
- 大体の部分で下の記事に倣っています。多謝。
- グローバルの汚染を防ぐため、タグ以外のアプリのロジックは全てwindow.Appに入れます
- index.jsを参照してください。この中はES2015が書けるので、importが使えます
- データの管理にはRiotControllを利用したゆるいFlux的なモデルを組み込んでいます
- データの管理はデータストアクラスに隔離されています。タグからはアクセスできません
- タグからデータを参照/更新するには、App.controllerに対してイベントを発行します
- 詳細はサンプルのusers.tagを参照してください
- SPAの画面遷移（ルーティング）には公式のriotルーターを利用しています
- App.routerでアクセスできます
- ルーティングの定義はrouter.jsを参照/編集してください
- riot.js
- src/tag/の下の.tagをコンパイル・結合し、dist/js/tags.jsに出力します
- ES2015で書けます
- riotコパイラのsourcemap対応がダメっぽい（2017/2時点で対応中？）ので、妥協でコンパイル後・結合前のjsに対してソースマップを作ってます。ごめんなさい
- その他のjs
- src/js下の.jsをコンパイル・結合し、dist/js/main.jsに出力します
- ES2015で書けます
- ソースマップ作ります
- sass
- src/css/の下の.scssをコンパイル・結合し、dist/css/style.cssに出力します
- 今のところ圧縮はしてません
- ソースマップ作ります
- ベンダプレフィックスつけたりもやってません。必要なら追加してください
- html
- 何もしません。単に/srcから/distにコピーします
- jQuery使いたいんだけど
- npm install --sava jquery とかで入れてください
- タグから使いたい場合は、index.jsでriot.jsと同じ要領でwindow直下にエクスポートしてください
- ↑の手順がめんどくさければ、index.htmlでCDNから引っ張ってくるのでもOKです
- ブラウザ同期がいつのまにか死んでるんだけど
- 私もわかりません。エラー出るようにしてるんだけど...
- 画像を変えたのに反映されないんだけど
- js,tag,html,sass以外は監視対象にしていません
- Ctl-Cで止めて、もう一度npm run watchすれば反映されます
- 画像以外のリソースファイルはどこに置けばいいの？
- srcの下に自由にディレクトリ作ってください
- そのままだとビルドに反映されないので、gulpfile.babel.jsを開いて、cpResourceタスクに定義を追加してください
- ファイルが増えてきたらビルドが重いんだけど
- watchifyとか入れてください（他人任せ）
MIT