grunt task unite-coffee
DESCRIPTION
TRANSCRIPT
![Page 1: Grunt task Unite-Coffee](https://reader034.vdocuments.site/reader034/viewer/2022051411/54807c12b4af9faa158b5d27/html5/thumbnails/1.jpg)
coffeescript をいいかんじにコンパイルする grunt task
grunt-unite-coffee
13年4月29日月曜日
![Page 2: Grunt task Unite-Coffee](https://reader034.vdocuments.site/reader034/viewer/2022051411/54807c12b4af9faa158b5d27/html5/thumbnails/2.jpg)
自己紹介
面白法人カヤック HTMLファイ部 中農稔
最近はもっぱらJSerです。
twitter@nenjiru
13年4月29日月曜日
![Page 3: Grunt task Unite-Coffee](https://reader034.vdocuments.site/reader034/viewer/2022051411/54807c12b4af9faa158b5d27/html5/thumbnails/3.jpg)
Coffee Script いいですよね
13年4月29日月曜日
![Page 4: Grunt task Unite-Coffee](https://reader034.vdocuments.site/reader034/viewer/2022051411/54807c12b4af9faa158b5d27/html5/thumbnails/4.jpg)
ネックだったデバッグも Source map を使えばCoffeeScript のコードでデバッグが可能です
13年4月29日月曜日
![Page 5: Grunt task Unite-Coffee](https://reader034.vdocuments.site/reader034/viewer/2022051411/54807c12b4af9faa158b5d27/html5/thumbnails/5.jpg)
Chrome 設定方法
ステップ実行やブレークも CoffeeScript でできます
13年4月29日月曜日
![Page 6: Grunt task Unite-Coffee](https://reader034.vdocuments.site/reader034/viewer/2022051411/54807c12b4af9faa158b5d27/html5/thumbnails/6.jpg)
ところが CoffeeScriptのコンパイルは
分割出力時にディレクトリを指定できない
結合順が指定できない
(=依存関係を解決できない) など
あまり複雑なことができません
13年4月29日月曜日
![Page 7: Grunt task Unite-Coffee](https://reader034.vdocuments.site/reader034/viewer/2022051411/54807c12b4af9faa158b5d27/html5/thumbnails/7.jpg)
ある程度の規模で開発するならファイルをパッケージ単位でディレクトリ管理したいですよね
13年4月29日月曜日
![Page 8: Grunt task Unite-Coffee](https://reader034.vdocuments.site/reader034/viewer/2022051411/54807c12b4af9faa158b5d27/html5/thumbnails/8.jpg)
CoffeeScriptのSource map は(たぶん)MapファイルとJSが
同一階層にあることが前提っぽいのでソースをディレクトリごとにわけて管理できません
13年4月29日月曜日
![Page 9: Grunt task Unite-Coffee](https://reader034.vdocuments.site/reader034/viewer/2022051411/54807c12b4af9faa158b5d27/html5/thumbnails/9.jpg)
つらい ><
13年4月29日月曜日
![Page 10: Grunt task Unite-Coffee](https://reader034.vdocuments.site/reader034/viewer/2022051411/54807c12b4af9faa158b5d27/html5/thumbnails/10.jpg)
Grunt でごにょごにょすればできそうだぞ
13年4月29日月曜日
![Page 11: Grunt task Unite-Coffee](https://reader034.vdocuments.site/reader034/viewer/2022051411/54807c12b4af9faa158b5d27/html5/thumbnails/11.jpg)
grunt-unite-coffee つくりました
https://github.com/nenjiru/grunt-unite-coffee
13年4月29日月曜日
![Page 12: Grunt task Unite-Coffee](https://reader034.vdocuments.site/reader034/viewer/2022051411/54807c12b4af9faa158b5d27/html5/thumbnails/12.jpg)
ターゲットファイル(HTML)を指定しファイルリストにしたがって
コンパイルした JS と Sourcemap を読み込むモードと結合・圧縮した JS を読み込むモードがあります
これはなに?
13年4月29日月曜日
![Page 13: Grunt task Unite-Coffee](https://reader034.vdocuments.site/reader034/viewer/2022051411/54807c12b4af9faa158b5d27/html5/thumbnails/13.jpg)
DLしてきたら、npm install して
Gruntfile.js と import.json を設定します
サンプルを同梱してるので、すぐ試せます
使い方
13年4月29日月曜日
![Page 14: Grunt task Unite-Coffee](https://reader034.vdocuments.site/reader034/viewer/2022051411/54807c12b4af9faa158b5d27/html5/thumbnails/14.jpg)
Gruntfile.js はおもに初期設定を
import.json にはソースファイルのパスを記述しておきます
サンプルを同梱してるので、すぐ試せます
13年4月29日月曜日
![Page 15: Grunt task Unite-Coffee](https://reader034.vdocuments.site/reader034/viewer/2022051411/54807c12b4af9faa158b5d27/html5/thumbnails/15.jpg)
コマンドは2つ
grunt unite-coffee:dev(未結合の JS を読み込み
grunt unite-coffee:app(結合、圧縮済みの JS を読み込み
13年4月29日月曜日
![Page 16: Grunt task Unite-Coffee](https://reader034.vdocuments.site/reader034/viewer/2022051411/54807c12b4af9faa158b5d27/html5/thumbnails/16.jpg)
デモ
13年4月29日月曜日
![Page 17: Grunt task Unite-Coffee](https://reader034.vdocuments.site/reader034/viewer/2022051411/54807c12b4af9faa158b5d27/html5/thumbnails/17.jpg)
ありがとうございました
13年4月29日月曜日