2013年11月30日（土）に開催された「HTML5 Conference 2013」の、株式会社サイバーエージェント・石本光司さんによるセッション「今どきのGruntを使ったフロントエンド開発（HTML/CSS編）」の内容をご紹介します。
なお、セッションのターゲットはGruntを使ったことのないHTML/CSSコーダーやWebデザイナーさんです。
なぜGruntを使うのか
Gruntとは、JavaScriptで書いたタスクを実行してくれるアプリケーション（JavaScript Task Runner）です。
Webアプリケーションの開発が複雑になってきて、CoffeeScript、Sassなどのコンパイルが必要な技術を使うことが多くなってきたことや、フロントエンドのパフォーマンスチューニングのためにJavaScriptやCSSファイルの最小化や画像の最適化を行うことが増えてきました。
Gruntを使うとそれらをまとめて自動化することができるようになります。
GUIアプリケーション（CodeKitなど）でも同じようなことができますが、有料であったり、アプリケーションに慣れるまでの時間がかかったり、複数人で作業する場合に共有しづらいなどの理由で黒い画面（コマンドライン）のGruntを使うことをオススメします。
Gruntの使い方
Gruntをインストールするために、まずはnode.jsをインストールしましょう。 公式サイトからインストーラーがダウンロードできます。
node.jsがインストールできたら以下のコマンドをコマンドラインで実行してgrunt-cliをインストールします。
|
1 |
$ npm install grunt-cli -g |
grunt-cliはGruntをコマンドラインから使えるようにするパッケージです。-gを付けることでどのディレクトリからも使うことができるようになります。
Gruntを実行するにはpackage.json、Gruntfile.js（.coffeeでも可）の2つのファイルが必要になります。
以下、grunt-cssoを使う場合を参考に説明をします。
package.jsonを作る
package.jsonのひな形を作るために以下のコマンドを実行します。
|
1 |
$ npm init |
対話形式で色々と聞かれますがEnterで進めていけばOKです。そうすると以下のようなpackage.jsonのひな形が生成されます。
|
1 2 3 4 5 6 7 8 9 10 11 |
{ "name": "demo", "version": "0.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "BSD-2-Clause" } |
次にローカルのプロジェクトにgrunt本体とgrunt-cssoをインストールするために以下のコマンドを実行します。
|
1 2 |
$ npm install grunt --save-dev $ npm install grunt-csso --save-dev |
grunt本体とgrunt-cssoがインストールされました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
{ "name": "demo", "version": "0.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "BSD-2-Clause", "devDependencies": { "grunt": "~0.4.2", "grunt-csso": "~0.5.2" } } |
–save-devはpackage.jsonのdevDependenciesに開発向けの依存モジュールとして追加してくれるオプションです。複数人で作業する場合にインストールするモジュールを揃えることができます。共有された人は以下のコマンドを実行するだけで必要なパッケージを全てインストールすることができます。
|
1 |
$ npm install |
Gruntfileを作る
Gruntfileのひな形を作るにはgrunt-initをインストールする必要があります。grunt-initは様々なプロジェクトのひな形を作ることができるアプリケーションです。gitがインストールされていない場合は別途インストールが必要です。
以下のコマンドでGruntfileが生成されます。
|
1 2 3 |
$ npm install grunt-init -g $ git clone https://github.com/gruntjs/grunt-init-gruntfile.git ~/.grunt-init/gruntfile $ grunt-init gruntfile |
package.jsonとGruntfileは既存のプロジェクトからコピーしてきてもOKです。
Gruntfileの内容について
Gruntfileの中身で大事なのは3箇所です。
まず最初にインストールしたパッケージを読み込む記述です。
|
1 |
grunt.loadNpmTasks('grunt-csso'); |
これがないとcssoのタスクが使えません。
次にタスク設定の記述です。
|
1 2 3 4 5 6 7 8 9 |
grunt.initConfig({ csso: { dist: { files: { 'output.css': ['input.css'] } } } }); |
initConfigの中に、タスクを記述していきます。cssoはタスク名、distはターゲットを示しています。filesで入出力のファイル名を記述します。
distの下の階層には大抵入出力のファイル名と必要であればプラグインのオプションを指定します。例えば、開発環境と本番環境で異なるファイルを使っている場合などに、distの部分をdevとprodで分けて設定しておくことで環境ごとにタスクを分けることができます。
最後にカスタムタスクの記述です。
|
1 |
grunt.registerTask('default', ['csso']); |
defaultで指定するとgruntコマンドだけで実行することができます。複数のタスクをまとめて任意の名前を付けることもできます。
例の場合だと、以下のコマンドどちらでもcssoを実行することができるようになりました。
|
1 2 |
$ grunt csso $ grunt |
Gruntfileのカスタマイズ
Gruntの使い方が大体分かったらGruntfileをカスタマイズしていきます。
Gruntは公式サイトにプラグインの一覧を掲載しています。よく使うタスクはプラグインとして登録されている場合が多いのでまずは探してみましょう。同じ処理をするプラグインが複数あった場合は、grunt-contrib-**というgruntチームがメンテナンスしているプラグインを使う方がオススメです。
もし見つからない場合は自分で作ってみましょう。
|
1 2 3 |
$ npm install grunt-init -g #grunt-initがインストール済みなら不要 $ git clone https://github.com/gruntjs/grunt-init-gruntplugin.git ~/.grunt-init/gruntplugin $ grunt-init gruntplugin |
実行することでプラグインのひな形が生成されるので作っていきましょう。
Maple
最後にCSSフレームワークMapleのご紹介です。
CSSフレームワークと言いながら全然CSS部分は作っていないですがGruntの設定はある程度できているので参考にしてみてください。
CSSの再利用性を担保するためにcsslintを使ってチェックを行ったり、スタイルガイドを生成できるようにkssを使うことができるようになっています。その他に画像の最適化なども可能です。
かんたんにGruntを使う
Yeomanを使います。 YeomanはGruntを含んでいるのでGruntを簡単にインストールすることができます。
例えば、Mapleをインストールするには以下のコマンドを実行します。
|
1 2 3 4 |
$ npm install yo -g $ npm install generator-maple -g $ mkdir maple-demo && cd $_ $ yo maple |
かんたんにGruntとMapleをインストールすることができます。
まとめ
なぜGruntを使うのかというと自動化するためです。Webアプリケーションの開発が複雑化によって様々なタスクを実行する必要がありますが、人が実行する場合は忘れてしまったりすることがあります。それらはコンピューターに任せることにしましょう。
さらにGruntであればカスタマイズが可能です。開発しているアプリケーションに合わせたカスタマイズができます。もし必要なプラグインがなくても自分で作ることができます。
また、黒い画面を触るきっかけになるのではないかと思います。Gruntプラグインの開発などの分野はエンジニアが中心の世界になっています。そのためかCSSの便利なモジュールなどは少ない状況です。デザイナーやコーダーの方が参加して頂けるともっとより良いモジュールが作られるようになって、それを使えるようになるとみんながハッピーになれると思います。
とりあえず触って動かしてみるのは説明した通りかんたんにできますので黒い画面が苦手な人も是非チャレンジしてみてください。
（撮影：高橋 佳代子）
【講演資料・セッション映像】
