Yeomanを使ってSass/LESSをもっと簡単スピーディに〜解説編〜

以前、勉強会で発表したスライドがあるのでこちらのほうが概要は理解しやすいかもしれません。

WEBアプリケーションビルド・テストツール YEOMAN from kamiyam .

Yeomanとは

Yeomanは簡単に言うとビルドツールです。もしかすると、一般的にビルドっていう言葉は聞きなれないかもしれません。

サーバサイドの言語を書くプログラマなどを例にします。

大雑把ですが、プログラマは

｢人が読み書きできるソースコードを書いて、PCが理解できる実行ファイルに変換する｣

という作業をおこなっています。 (例外はありますが･･･)

つまり、

これがビルドです。

とは言え、今はコードを書く際 IDE (VisualStudio、ecripse、aptanaなど) が自動で実行ファイル(Windowsなら.exeファイルなど)に書き出してくれています。

一方、フロントサイド...

今まではHTMLとかCSSなどテキストエディッタで編集したファイルをそのままFTPなんかでアップすればブラウザに表示されていたと思います。

でも、最近はそうもいかない。

HTMLであればJade、CSSならLESSやSass、JavaScriptならCoffeeScript。
今まで、ブラウザにUPすれば即動作していたファイルを別の書き方で記述する。という流れが主流になってきています。

それは、コード記述の早さだったり、統一性だったり導入する理由は様々です。

通常SassやCoffeeScriptは単体でアプリもしくはコマンドを叩いて、それぞれの変換ファイルを出力することになります。
もしかすると、編集しているファイルはSassファイル(.sass)なのに、HTMLから読み込んで(リンクして)いるファイルはCSSファイル(.css)なのかもしれない。

今や、HTMLを書こうとするだけで、コンパイルしてリンクする作業が必要になってきます。
でも、この辺りがいま非常に面倒な作業。

編集しているファイルの変更を監視しつつ、編集されたファイルを自動でコンパイルしてはくれないか。

この辺りのことをしようとするとGRUNTというキーワードにたどり着くと思います。
grunt.js単体だと少し理解するまで時間がかかるのでここではYeomanから･･･

(Yeomanはgrunt.jsをラップ(内包)しているのでいずれgrunt.jsをやることにはなりますが)

ということで、次は導入編を。