静的なWEBサイトを開発(?)するときに楽をする為に
やったこと
- Jadeで書いたソースコードを保存したら自動でコンパイルして、自動で生成したHTMLを適当なブラウザで開く&自動でコミットする。
普通にHTML書いているだけなら、上書きする度にCtrl+rをブラウザで押して更新すればいいけど、テンプレートエンジン使うと変換する手間があるので自動化したかったというだけの話ですね。
経緯
お仕事で「何故か」膨大な量のHTMLを修正することになって、当然ながらHTMLなんて書きたくなかったのでJadeで書いてしまいたかった。
ちなみに元のHTMLはインデント幅が4文字だったし、インデント揃ってないし、タグの位置関係とかスタイルが直書きされてたりとかで、それはそれは読みたくても読めないレベルでした。
準備
使ったもの
- Emacs24
- Html2Jade
- Jade
- Guard
- Git
大事なのは真ん中のみっつくらい。JadeとGuardが今回の話の中心です。
Node.jsはnpmでインストールされている前提で。
npm install -g jade npm install -g html2jade
Rubyも適当なバージョンがインストールされていてgemが使えればどうでもいいです。
gem install guard gem install guard-shell
あとはEmacsにJade-mode入れたりとか、Gitは当たり前のように入ってたりとかするけどキニシナイ。
カレントディレクトリには以下のフォルダとファイルが存在します。
dist/ html/ src/ Guardfile
htmlは本来修正したかったHTMLファイルが入っています。
srcはhtml2jadeで変換したjadeが入ります。
distはJadeからHTMLに変換したファイルが入ります。
Guardは後述するコードが書かれています。
実際にどうやったか
まず、すっげー読みにくいHTMLファイルを全てHtml2JadeでJadeの形にします。
# 出力先がsrcなのは、このあとJadeファイルに修正を行なっていくので。 html2jade html/*.html -o src
ちなみにどのくらい読みにくかったかって、colspan='1'が全てのtdタグに指定されていたり、theadタグの中にtbodyダグが入っていたりするレベルです。畜生。。
とりあえず、Jadeに変換するだけで嬉しいことがふたつあって、まずインデントとかがめちゃくちゃなHTMLでも、Jadeの形になるのである程度綺麗になります。もうひとつはJadeに変換した際に、HTMLに誤りがあるとインデントがまず揃わなくなるので、Jade->HTMLのときにダメな点が明らかになります。まぁ後はコードの総量が閉じタグない分減るかなーくらい。
次にGuardの設定をします。なんでNode.jsでもファイル監視できるのにRubyのGuardかというと単に使いやすいからです。
ただそれだけです。Guardfileは以下の通り。
guard 'shell' do
watch(/(.*).jade/) {|m|
filepath = m[0]
`jade -P -o ./dist #{filepath}`
`google-chrome #{filepath.gsub(/^src\//, 'dist/').gsub(/jade$/, 'html')}`
`git commit -a -m '#{filepath} 変更'`
}
endこれをやるだけで、Jadeファイルを変更する度にhtmlに変換してくれて、しかもブラウザで開いてくれて、しかもコミットまでしてくれる！素敵。Rubyはよく分からないので、適当。
ここまでやったら後はガシガシJadeファイルを修正していく。すると上書き保存する度に、Guardが検知してくれてブラウザ上に表示されます。素敵。
やってみた感想
- Jadeはインデントが意味を持つので、自動整形ができないのが不便だった。
- ソースの折りたたみが使えないと、100行くらい前に書いた部分とインデント揃えるのに苦労する(というか、した)。
- 今回同じヘッダーを全画面に統一的に付けたりしなければならず、そういったものをincludeで書けたのは嬉しかった。
- Guardいいね、Guard。
Sassとかも使えたらよかったけど、CSSに関しては既にあったし修正量も少なかったので、そこまではやらなくていいかなと。
Jadeそのものの学習コストはほぼ0なので、HTML書ければなんとかなると思います。まぁLispの括弧は偉大だなーと思いました。
