Gruntの勉強会に参加してきました

2013年3月14日に大阪某所で開催された、Gruntの勉強会に参加してきました。

勉強会自体は、有志の人が集まって、毎月違ったテーマで各自もくもく作業するというもの。わからないことがあったら周りの人と相談したり議論できるし、新しい技術を実際に触ることができるいい機会なのです。

さて、Gruntですが、これはJavaScriptのソフトウェア開発において、プロジェクト作成からソフトウェアの公開までに必要なたくさんの作業(タスク)を、コマンド一発で自動的に実行できるというものです。

Grunt: The JavaScript Task Runner

タスクは他の人が公開しているものを使うこともできるし、自分でもつくることもできちゃいます。タスクの代表的なものを挙げると、

  • ファイルの変更監視
  • CoffeeScriptのコンパイル
  • コードの結合
  • コードのMinify
  • テストの実行
  • JSHintによるコードの品質チェック

などがあります。たくさんの人がGruntが実行できるタスクを開発・公開しているみたいなので、できないことはあんまり無さそうですね。

Gruntの事前知識が全くない状態で参加したので、勉強会では以下のチュートリアル記事に沿うかたちで、一人もくもくキーボードを叩いておりました。

Meet Grunt: The Build Tool for JavaScript | Nettuts+

チュートリアルが対象にしているGruntのバージョンが少し古いものだったので、以下の記事を参考にしながら、頭のなかで読み替えて進めることに。

Upgrading from 0.3 to 0.4 · gruntjs/grunt Wiki

それでは、僕が勉強会でもくもくしていた作業内容を以下まとめていきますね。

Gruntのインストール

GruntをインストールするにはNode.jsとNPMの環境が必要です。

僕のPCにはたまたまMacPortsを使ってインストールされていたので、以下のコマンドでGruntをインストールしました。

Gruntはローカルにインストールしないといけないみたい。(理由はわかってません)

grunt-initのインストール

チュートリアルで紹介されていた、様々なテンプレートからGruntプロジェクトをさくっとつくることができる「grunt-init」というツールをインストールします。以下のコマンドを実行しました。

RailsでいうScaffoldのような機能を提供してくれるもののようですね。

jQueryテンプレートのインストール

grunt-initを使うためにはプロジェクトの雛形となるテンプレートをインストールしなければなりません。

今回はチュートリアルで紹介されていた「jQueryテンプレート」を以下のコマンドでインストールしました。

~/.grunt-init/ディレクトリ以下にテンプレートを配置しておけばいいみたい。

jQueryテンプレートからプロジェクトを作成

早速インストールしたjQueryテンプレートからプロジェクトを作成したいと思います。以下のコマンドを実行しました。

コマンドを実行すると対話的なプロンプトが表示されます。プロジェクト名や開発者の情報、ライセンスなどを入力すると、自動的にさまざまなファイルを生成してくれます。

jQueryテンプレートは、jQueryプラグインを開発するためのもののようで、JavaScriptコードのひな形や、QUnitを使ったテストコード、依存するライブラリ(jQuery本体やQUnit)などが自動的に生成されました。

また、このプロジェクトで利用可能なGruntのタスクを定義するGruntfile.jsというファイルも生成されてました。このファイルを編集することで、Gruntの挙動を色々カスタマイズできるみたいですね。

タスクの実行に必要なライブラリをインストール

とりあえず、gruntコマンドを実行すると一連のタスクが実行されるようなので、試しに実行してみたところ、タスクを実行するために必要なライブラリが足りないという旨のエラーが。

なので、以下のコマンドを実行し、必要なライブラリをインストールしました。

それぞれの名前を見れば、一体なんのタスクを実行するために必要なのか、なんとなくわかりますね。

デフォルトタスクを実行

Gruntfile.jsには、デフォルトのタスクとして、複数のタスクを一括で実行するための定義が記述されています。

デフォルトタスクを実行するには以下のコマンドを実行するだけ。

JSHintやテストの実行、Minifyまでを、たった一回のコマンド実行でおこなうことができました。

特定のタスクを実行

gruntコマンドにタスク名を引数として渡して実行することで、特定のタスクだけを実行することができます。

今回は、以下のコマンドを実行して、JSHintのタスクを動かしてみました。

まとめ、雑感

今回はGruntfile.jsの中身を詳しくは見て行きませんでしたが、中身はJavaScriptコードなので、自分の好きなようにプロジェクトやタスクをカスタマイズできそうでいいですね。

grunt-initは、Gruntfile.jsの作成を自動化してくれるのが一番の便利なところだと思いますが、次は一度自分でGruntfile.jsを最初から作成してみようかな。

Gruntのもっともっと詳しいところに関しては、他の参加者のみなさまがブログにまとめてくれると思います。

なんかjQueryプラグインやNPMのモジュールをGruntを使って開発したくなってきたぞ!みなさんも是非試しに使ってみてくださいね。

それではー!