rootsは、jade、stylus、coffeescriptをデフォルトのスタックとして構成されています。

「サイト構築のための枠組みを用意してくれる「roots」を試してみました。」 の続きです。

rootsは、jade、stylus、coffeescriptをデフォルトのスタックとして構成されています。

jadeは、htmlのテンプレートエンジン
stylusは、cssのテンプレートエンジン
coffeescriptは、JavaScriptのコードを生成するためのコンパクトなスクリプト言語

jade
http://jade-lang.com/

stylus
http://learnboost.github.io/stylus/

coffeescript
http://coffeescript.org/

どれにも共通しているのは、少ないタイプ数で実現したい内容を表現できること。そのソースをコンパイルすることで、html、css、JavaScriptを生成します。

どれも、タグの記載の冗長な部分を不要としていたり、変数が利用できたりと、プログラミングをする際に便利な機能が用意されています。

rootsでは、jade、stylus、coffeescriptの各ソースを修正して、保存すると、自動的にコンパイルされてブラウザに表示されている画面に反映されます。

テンプレート言語を使用して、ウェブサイトを作成する際の、ソースを変更保存して、コンパイル、ブラウザをリロードして確認という作業が一瞬で出来ます。

実際のソースで確認してみます。

example > views > index.jade
の最後に、下記の２行を追加します。

p hello world
.box

example > assets > css > master.styl にboxクラスの指定を追加します。

.box
  size: 30px
  border: 1px solid 

上記のファイルを保存すると、自動でコンパイルされます。index.jadeはindex.htmlに、master.stylはmaster.cssにコンパイルされ、ブラウザには、その結果が自動でリロードされます。