Grunt.jsの始め方 -Grunt.jsの概要編-



最近何かと話題のGrunt.jsなのですが、Grunt.jsについてこの間とある勉強会で話して来ました。

Railsとか勉強会!【春だから・わっくわっく!4/24(水)懇親会付き!!】Railsで最速Webアプリモック制作・A/B testing in Rails ・快適CSS Preprocessorなど

まぁ、微妙だったのはRailsとか勉強会って言ってるのに、Grunt.jsの話をしちゃったので聴講者が若干( ゚д゚)ポカーンって感じでしたね。。
結構冷たい目が厳しかったです。。

その際に話したGrunt.jsのことでも書いておこうかなと。。

Grunt.jsとは

grunt3.png
最近のWeb制作は結構パワーアップしてて、sassやLessなどのCSSプリプロセッサーなどが出てきたり、javaScriptをより良く書きやすいようなCoffeeScriptやTypeScriptなどが出てきたりしてます。

これらはとても便利なんですけど、なにげにコンパイルの作業がすごくめんどくさかったりします。。。

これらのコンパイル作業を自動でやってくれるのがGrunt.jsです。

grunt1

Grunt.jsはGUIツールではなく、タスクというものを書きコンパイルの手順を記述し、CUIで管理をするツールになります。

Grunt.jsのいいところ

  • 環境に依存しないところ
  • 共同作業に向いているところ
  • アップデートが早いところ

1つ1つ見て行きましょう

環境に依存しないところ

GUIツールなどで非常に便利な「CodeKit」などがあります。
これは非常に便利なアプリなのですが、問題は環境がMacしかありません。
他の環境の開発者はどのようにすればよいでしょうか?
Grutn.jsならばどの環境でも動かすことが出来ます。

共同作業に向いている

Grunt.jsではビルドのタスクをgruntfile.jsというものにまとめていきます。
GitHubなどでプロジェクトを管理している場合、ディレクトリに何か追加したり、何か変更したとしても、このファイルを参考にすればどのようなことが行われたか瞬時にわかります。
GUIツールではビルド後のものを上げてしまったりするのでわからなかったりします。

アップデートが早い

GUIツールの場合、仮にsass自身に更新があったとしても、sassの新バージョンを組み込んで、GUIアプリ自身の動作テストを行ったりしなくてはならないため、物理的にすぐには出すことはできません。
しかし、CUIツールである、Grunt.jsはアップデートが非常に早いです。

でも、Grunt.jsは・・・・

Grunt.jsは結構メリットが多いように感じますが、やはり

  • 黒い画面である
  • ドキュメントが英語

のため、とっつきにくいと思います。
特にデザイナーさんの場合は。。

grunt2.png

次回以降、インストールからsassのコンパイルまでのところを解説して行きたいと思います。

ではでは