Haml+SCSS+CoffeeScriptでモダンな静的ページ制作を

CoffeeScript、流行っていますね。

あとはモダンなRubyistならそろそろ静的ページでさえもHTMLやCSSではなくHaml, SCSSで書きたいと思っていることと思います。

実現方法はあまり難しくありません。要はhaml, scss, coffeeファイルを更新したときに自動的にコマンドを実行してhtml, css, jsにコンパイルしてやればいいだけなので、watchrを使ってちゃちゃっとひな形を作ってみました。

なお、ついでにhttp://www.cdnjs.com/を使ってunderscore.jsとbackbone.jsを読み込んでいます。あとGoogle Libraries APIを使用してjQueryも読み込んでいます。

https://github.com/satococoa/modern_html5_lab

watchr？

watchrとは、ファイルの更新を監視し、任意の処理を実行するためのライブラリです。
例えばautotestのようにファイルの修正時に自動的にテストを実行したり、今回のようにソースファイルの更新時に自動的にコンパイルしたり、という用途で使えます。

$ gem install watchr # インストール
$ vim watchr.rb # 監視対象、処理を書く。ファイル名は別になんでもOK。

watchr.rb

watch('src/(.*)\.haml')   {|md| system("haml -f html5 #{md[0]} prod/#{md[1]}.html") }
watch('src/(.*)\.scss')   {|md| system("sass --scss #{md[0]} prod/#{md[1]}.css")    }
watch('src/(.*)\.coffee') {|md| system("coffee -o prod -c #{md[0]}")                }

$ watchr watchr.rb # 監視開始

もちろんhaml, sass, coffee-scriptが入っていないと動きません。

jsdo.it

先日初めて使ったjsdo.itが面白かったので週末にHTML5の練習も兼ねて遊んでみようかなぁと思ったのですが、久しぶりにHTML+CSS+JavaScriptを書いたら（ちなみにこんな気持ち悪いものができてしまった。http://jsdo.it/satococoa/faces）Haml+SCSS+CoffeeScriptのモダンな環境の簡潔さを実感してしまいました。
そのためローカルでHaml+SCSS+CoffeeScriptで書いたものをjsdo.itに貼り付ける方がいいかなぁと思い、こんなものを作ったのでした。

そういう目的なので、コンテンツのディレクトリ分けなどはしていません。