"今どきのGruntを使ったフロントエンド開発（HTML/CSS編）"セッションのメモ
最初に
HTML5 CONFERENCE 2013 に行ってきて、"今どきのGruntを使ったフロントエンド開発（HTML/CSS編）" という 石本 光司 さんのセッションを聴いてきたのでそのメモを残しておこう。 当日のセッションは ここ（ ルーム1A - HTML5 カンファレンス 2013 - YouTube ） で観れます。 当日使われたスライドと発表内容は 今どきのGruntを使ったフロントエンド開発（HTML/CSS編） に公開されています。
今どきのGruntを使ったフロントエンド開発（HTML/CSS編）
Web アプリケーションの開発が複雑になってきており、それを改善するために所謂 "黒い画面" を使うようになってきた。
Grunt を使わなくても GUI ( Koala など) を使えば済む話ではある。
たが、各アプリケーションを GUI で導入すると、アプリケーションに慣れるまでの時間や、マネーというコストがそれぞれにかかってくる。それならここらでいっちょ黒い画面とやらを触ってみようぜーってことで Grunt 使いましょう。
Grunt を使う
Install
node.js をインストール ( npm も同時にインストール) したあと、
$ npm install grunt-cli -g
Grunt を動かしているファイル
以下の二種類のファイルで Grunt は動いている。
- package.json ( パッケージ管理 )
- Gruntfile.js ( 処理内容を記載 )
..大分聞きそびれた
この時聞きそびれた内容が多い..
公式サイト みて確認したほうが良い。
Grunt をカズタマイズする
まずは以下のリンクからプラグインをみて、拾って使ってみるといいかも
同じようなプラグインがあった時は、 grunt-contrib-{strict} を使った方がいい。公式でサポートされているものだから。
スタイルガイドは何故作るのか
デザイナーとモジュールの共有し、フロントエンドではこういうふうにスタイルを組んでいるんだよ. っていうのを両者で共有することが重要なため。
本筋とは関係ないが、Sass 等のメタ言語は作業の効率化などを促進してくれるが、 CSS がもつ根本的な問題（メンテナンスブルな設計など）を解決してくれるツールではない。
Grunt は何を解決してくれるか
CSS や画像の圧縮、コードの文法チェック、SCSS のコンパイルなどを管理する。
制作を行うのは人間なので、いくら人の意見や経験でベタープラクティスがわかっていても、「めんどくさい」や「わすれてた」でベタープラクティスがとれていないことがある。これを解決するために、製作作業の中でベタープラクティスを気づかせてくれる・自動で行ってくれるのが Grunt 。
Grunt を最速で使うために ( YEOMAN )
Grunt を最速で使うためには、YEOMAN をインストールする。 Grunt, BOWER を内包している。
その他メモ
最後に
Grunt は Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門 という記事が出た時に知った時から存在は知ってたけど、導入できてない.. 。
これを機に導入したい！
