事の発端は、Facebookで
今の自分の環境的にはgrunt (もしくはgulp) だけど、デザイナさんだと middleman をおすすめするかな。協業で grunt 使うっていうパターンは使い方のみになるだろうし、細けーことはいいんだよってなる。
とある日のかみやんさんのFacebook投稿より
この投稿から始まった「Web的な話をシェアしてみる会」。勉強会ではなく、情報交換会的スタンスな中、結局いっぱい教えてもらってきました！
Grunt はいろんなことがいっぱい出来るすごいやつだけど、設定ファイルをつくるのが大変！
Gruntは、タスクランナーと言われるツールでデザイナが使う部分は、LESSやSassのコンパイルではと思います。コンパイルは、こざる的解釈では「人が読める状態から、コンピュータが読める状態に変換すること」なんですが、ここでいうコンパイル結果は「人」でも読めます。
コンパイル前：.lessファイル
[code].btn {
&:active,
&.active {
background-image: none;
}
}[/code]
コンパイル後：.cssファイル
[code].btn:active,
.btn.active {
background-image: none;
}[/code]
このコンパイルを自動的にやってくれるGrunt。実はすごいやつで、機能満載、エンジニアさんには手放せないツールなようでした！また、Gruntの設定ファイルは、長いので、修正などが、大変だということでした。
サイト内で使用するパッケージのバージョン管理をしてくれる Bower
最近世の中どんどん進化して、その進化が早くて、作っている間に使っているパッケージがバージョンアップされちゃうなんて当たり前！各パッケージのサイトにいくと最新バージョンはダウンロードできるけど、過去のものを探すのは大変だったり…それを解決してくれるのが、Bowerです。
Bowerは、サポートしているパッケージをバージョンごとに持っているので、欲しいパッケージとバージョンを設定しておけば、それをダウンロードしてきてくれるツール。一度設定ファイルを作成すれば、使っているパッケージが最新になっても、設定している古い方のバージョンのパッケージをダウンロードしてきてくれるようです。
-saveオプション
bower install jQuery -saveのようにオプションをつけると、bower.json（設定ファイル）にjQueryが追加される！-saveオプションってこういう意味だったんやー！（イマサラ）
「よー(yo)」と呼ぶと、Web開発環境を作成してくれるBowerもGruntも一緒にインストールしてくれる Yeoman
Yeomanは、コーダやデザイナさんがどこまで使えるものなのかよくわかっていませんが、「よー(yo)」コマンドでBowerもGruntも使えるようになるって言う部分はわかりました（→間違ってた、すみません。）。ここは、今後、精進ってことで。
また、yoコマンドを実行するとたくさんファイルができるようです。
YeomanとGruntとBowerの関係
Yeomanは、Web開発環境を作成してくれるツールです。その際、必要なパッケージのインストールにBowerを、必要なツールのインストールにGruntを使用する場合が、ほとんどようです。なので、YeomanでWeb開発環境を作成するときには、GruntとBowerを事前にインストールしておいたほうがよいようです。（2014.3.2追記）
参考スライド・WEBアプリケーションビルド・ テストツール YEOMAN
LESS / Sassのコンパイルなら、Middleman のほうが簡単！？インストールも楽チン
ここまで３つはNode.jsで動くツールたち。（先日勉強会行っててよかった！）今日のメインディッシュはRubyで動く、Middleman。
やったこと覚え書き
- インストール
gem install middleman- 作成したフォルダに移動して
middleman init ＊＊＊（＊＊＊:フォルダ名）- ＊＊＊に移動して
middleman serverでローカルサーバーが立ち上がるmiddleman buildでsourceフォルダ内のファイルが、buildフォルダ内に同じ構成でビルド（コンパイル）される
一番感動したのはテンプレート機能！ここはまた使ってみて次回詳しく書きたいと思います。
次に感動したのは日本語のサイトがあるところ！でした。
そして、インストール・簡単、コンパイル・お手軽、ファイル構成がわかりやすいところもすごくオススメでした。
パッケージの管理ってサイトだけじゃない！
Bower同様、npmでNode.js系ツールを、gemでRuby系ツールをパッケージ管理をしているってことなのかな。パッケージ管理ってよくわからないけど、インストールできてないと便利ツールも使えないので、この辺も要精進課題のひとつ。
教えてもらったパッケージ
他の参加者さんのお話
いろんなお話が聞けました！（こざる自身もBootStrapについて話をしました。）
- 無限スクロールとFuelPHP
- Bootstrapの話（初心者向け）
- Sketchを使ってみた！
- 現場のプロが教えるWeb制作の最新常識 知らないと困るWebデザインの新ルール
をみんなで読んでみよう！
ほんと参加してよかったです。もう数時間で年度末最後の月に突入するので、覚えているうちにざっくりまとめました。ご一緒させていただいたみなさま、主催してくれたかみやんさん、ほんとありがとうございましたー！
技術的な表記などに間違いがありましたら、教えていただければうれしいです。掲載された記事の情報もしくは内容を利用することで直接・間接的に生じた損失に関しては、一切責任を負いかねます。導入等はご自身の責任で行ってください。
