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

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

Yeomanとは

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

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

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

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

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

つまり、

  • ・JavaやC#などのコードを書いて実行ファイルに変換(コンパイル)
  • ・使っているライブラリなどとに関連付ける(リンク)
これがビルドです。

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

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

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

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

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

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

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

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

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

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

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

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