5次元のカオス

南の島の学生がつらつらと日々を書き連ねます

grunt.jsを使ってcoffee-scriptでの開発を便利にしたい

前回の記事から引き続いてgrunt.jsを使ってcoffee-scriptで便利に開発するためのgruntfileを組み立てていきたいと思います.

一応 github上に公開してみたので、色々とフィードバックを頂けると幸いです.

seka/myGrant-repo

以前からgruntをやりたいとは思ってはいたのですがインターンに参加していたり就職活動でバタバタしていたこともありなかなか時間を割くことが出来なくて辛かった...

自動化は学習コストは高い気がするけど一度書くと使い回しがきくのが良い感じですね.

今回はcoffee-scriptに関するタスクの自動化のみですが、色々なところで開発の話を聞いているとgrunt.jsを使った開発はもはや必須と言っても過言ではないと思ったので、もっと色々と試行錯誤してみたいと思います.

以下、健忘録としてメモ.

開発環境

各環境のバージョンは下記の通り.

grunt-cli : v0.1.13
"grunt : "^0.4.4"
"grunt-contrib-uglify" : "^0.4.0"
"grunt-contrib-coffee" : "^0.10.1"
"grunt-contrib-requirejs" : "^0.4.3"
"grunt-contrib-copy" : "^0.5.0"

これまでの僕の開発

とあるプロジェクトのファイル管理

$ tree 
.
|____ javascripts
| |____app.coffee
| |____app.js
| |____app.map
| |____HtmlTemplateClass.coffee
| |____HtmlTemplateClass.js
| |____HtmlTemplateClass.map
| |____InitCodeMirror.coffee
| |____InitCodeMirror.js
| |____InitCodeMirror.map
| |____main.coffee
| |____main.js
| |____main.map
| |____SubmitCodeClass.coffee
| |____SubmitCodeClass.js
| |____SubmitCodeClass.map
| |____SwitchResultWindowClass.coffee
| |____SwitchResultWindowClass.js
| |____SwitchResultWindowClass.map

→ お恥ずかしい話ですがjavascriptファイルとcoffeeスクリプトが混在した状態で放置されています.

※ source mapはjavascript実行時に起きたエラーをcoffee-script用のどの部分に対応するか示すためのファイルです

※ 今にして見るとファイル名も見せられたもんじゃな(ry

.

.

.

なぜこのような状態になったかというと、普段の開発環境がvimなのですがcoffee-scriptをwriteする際に下記コマンドが走るようにしていました.

.vimrc

"  coffee scriptをwriteすると.jsと.mapを書き出す
autocmd BufWritePost *.coffee silent CoffeeMake! -cb -m | cwindow | redraw!

そのため、coffee-scriptと同じフォルダ内にjsファイルとmapファイルが生成されることにより前述のようなカオスなファイル管理が生まれてしまうことになりました.

自分一人だけが見るプロジェクトではなく、githubなどのような複数の人が見るようなプロジェクトにおいてjavascriptとcoffee-scriptのファイルが混在しているのは、見栄え上よろしくないとの指摘を多数の方から頂き、どうしたものかと考えていました.

grunt.jsを使ってcoffee-scriptでの開発を便利にする

そこでタイトルにあるようにgrunt.jsを使ってcoffee-scriptでの開発を便利にしたいと考えました.

そこで、下記の手順を自動化できないかと考えました.

1. coffee-scriptを自動コンパイルし、javascriptsフォルダへ (coffee-scriptとjavascriptのフォルダをきちんと分ける)
2. javascriptsフォルダ内のjavascriptを1つのファイルとして結合する(ファイル連結)
3. 1つになったjavascriptファイルに対して最適化・圧縮をかける

それらをまとめたものをgithubで公開してみることにしました.

seka/myGrant-repo

色々とフィードバックが頂けると嬉しいなと思っています.

意外とコレだ!っていうものが見つからなかったので、自分で色々と試しつつ作ってみることにしたのですがなかなか使いまわすことができそうなので良いなと思ってます.

少しはcoffee力ついたかなあ....

htmlやcss周りについても色々書いていければと思っています.

参考