フレンズなんだね！
- src配下に成果物を置きましょう。ディレクトリは空気読んで
- gulpでビルドします。ビルドについては後述
- ES6で書こうな！
- ビルドの成果物はbuild配下に出力されます。build配下はgithubにコミットしないでいいです。.gitignoreに入れてあります。
gulp-webserverを確認用webserverとして用意しました。後述します。
- v8.x系最新のnodejsとnpmを入れておきましょう。
- GitHubからcloneしてきます
$ npm install- gulpを直接叩かず、npmスクリプトにいろいろ書いています。
$ npm run build # ビルドします
$ npm run clean # ./build配下をすっからかんにします
$ npm start # webserverを立ち上げます
$ npm run brower # ブラウザで http://127.0.0.1:3000 を開きます-
npm run build:continuousコマンドを用意しました。こいつは呼ばれると一発buildを実行し、その後src配下のコードを監視。変更があれば自動でビルドが走るようになります。きゃー素敵抱いて！ -
gulpを直接叩きたいときは
npxコマンドが便利です。
$ npx gulp build- VisualStudio Codeを利用している場合、taskが定義してあるので
cmd + shift + pからnpmタスクが実行できます。
npm start するとwebserveが立ち上がり、./build配下の静的ファイルを確認できます。
http://127.0.0.1:3000 にアクセスすると ./build/index.htmlが表示されます。あとは空気読んで！
src/config.jsonに各種APIのkeyなどを記述してください。GitHubには展開しないので、ハッカソン当日になんらかの方法でシェアします。念力とか
- 他のモジュールを参照したいときは
requireします。npm run buildするとbrowserifyを使ってrequireで指定されている依存関係を解決します。node.jsみたいな形で書くんですね。- たとえば外部のライブラリ(jQueryとか)を使いたい場合は
npm install --save-dev jQueryしてライブラリをインストール。その後、使いたいコード中でconst $ = require('jquery')とかすると、jQueryが使えるようになります。 - 内部の他のjsを指定したい場合は
const hoge = require('./plugins/moge')とかすれば読み込まれます。逆に言うとrequireしないと絶対に読み込まれません。
- pluginは
src/js/plugins配下に置きましょう - ファイル名はなんでもいいですが、
actionメソッドを必ず作ってください。app-main.jsはpluginのactionメソッドを呼び出します。actionメソッドはviasとcallbackいうオブジェクトを引数にとります。最後にcallbackを呼ぶことでrenderingします。。- 返却するjsonには喋りのパラメタとか喋る内容とかくま画像とかを指定してください。あとは空気読んで！
- pluginを書いたら、
app-main.jsのplugins配列のなかでrequireしてください。- ディレクトリ読んで自動でrequireさせようとおもったけど、同じこと考えてる人がissue立ててPR出してる最中だったので諦めた。
- Chromeでlocalhostから外部APIを叩くと CORS違反で超怒られる。このプラグインを入れておくといろいろ捗る