2013SassなどのCSSプリプロセッサを使うWebデザイナが増えてきました。Sassをコンパイルするだけなら黒い画面(ターミナル)を使わずともGUIアプリからの利用で問題ありません。ここは一歩踏み込んでGrunt(JavaScript製のタスクランナー)を使って、Sass以外のコンパイルやライブリロード、画像最適化、CSSのリントやスタイルガイド生成など、あらゆる作業をGruntに任せてより効率的な開発環境を手に入れてみませんか。Developerをしております@t32kです。Frontrendというコミュニティ活動をしています。通常は東京で3~4ヶ月の周期でフロントエンドをテーマにした勉強会を開催しています。良かったらみなさんもご参加くださいませ。Agenda今日の話す内容は以下のとおりです。Gruntを使うの?Gruntの使い方Gruntfileをカスタマイズしてみましょうちなみに今日の話のターゲットはGruntを使ったことのないHTML/CSSコーダーやWebデザイナーさんです。私自身、元Webデザイナーなので僕もできたことは皆さんもできるかと思います。Runnerまず、Gruntはなんでしょうか。Runnerと書いています。JavaScriptでTask(あなたがしてほしい処理)をしてくれるRunner(実行してくれるもの)といった意味です。Gruntの使い方としてはこのように黒い画面にgruntといったコマンド名を打つことで使います。作っているわけではない。そのため以前よりもましてWeb制作は複雑性を増している。languageSassとかのコンパイルや画像最適化処理などであったら、別に黒い画面(Grunt)を使わなくても上記のようなGUIアプリを使うことができます。デザイナーにとっては分かりやすいかもしれないGUIアプリですが、エンジニアさんが『ちょっとSass修正したいんだけど。』って言われた時に、これらのGUIアプリの使い方を説明するにあたって『ここのボタンを押して、ここのメニューからhogeを選択して、、、』といったまどろっこしい説明をしなければなりません。Gruntであれば後述するPackage.jsonとGruntfile.jsを渡して、任意のGruntタスクコマンドを打つだけです。ターゲットとしているGUIアプリでは都合が悪い時があります(ウチの開発環境ではこれが使えない、これしたいんだけど負の遺産が。そんな時はGUIアプリではその機能や設定が実装されるまで指を加えて待たないといけません。Gruntなら、タスクを組み合わせたりすることで、ある程度柔軟に対応することができます。Enterpriseを導入した時に私は『やったーこれでGitが使えるお!』と思い、喜び勇んでTowerというGUIのGitクライアントアプリ購入しました。Appsまた、これらのアプリの中には有料のものもあります。現在有料じゃなくても将来有料になるかもしれませんし、より良いサービスを受けようとおもうと有料プランを選択肢なければならないかもしれません。良いアプリにお金を払うこと自体、とても素晴らしいことだと思います。さっきの例でエンジニア:『Sassコンパイルしたいんだけど』、デザイナー:『有料アプリ買ってね!』って言うのはなんか違うかと思います。Gruntなら各種プラグインは基本的に無料です。Soudersが『ハイパフォーマンスWebサイト』の著書で初めてフロントエンドのパフォーマンスの重要性について説きました。その当時は高速サイトの14のルールという基本的なルールさえ守れば、だいたい問題ありませんでした。時は経ち、2013年、#perfmattersの大号令を気に、Webパフォーマンスと言っても、Network、Render、Computeの3つの分野に分類され、それぞれの分野ごとに本が出るほど、対応する対策というのは複雑、高度化してきました。ハイパフォーマンスJavaScriptRenderは同僚のahomuさんの資料が一番まとまっているかと思います。そんなわけで、フロントエンド(HTML/CSS)に関しても、画像の最適化、効率的なスタイルシートの管理、縮小化など対応すべきタスクは多くなってきています。これらの作業を一つ一つ手作業でやっていては抜けなどもありまうすし、面倒です。いったものはGruntに任せ自動化すべきです。Grunt次は使い方です。node.jsをインストールしましょう。公式サイトにはインストーラーが配布されているのでポチポチとボタンを押していくだけでインストールできます。Module)というパッケージ管理ツールも一緒にインストールされます。-gなので、このコマンドの意味はnpmでinstallします、grunt-cliを。