Gruntのインストールの前に、Gruntに関連する技術を簡単に解説します。
先ほども言ったように、GruntはNode.js上で動作します。Node.jsはGoogle ChromeのJavaScript実行環境(V8)をベースに構築されたサーバーサイドJavaScriptのプラットフォームです。JavaScriptを使用してイベント駆動でノンブロッキングIOモデルのアプリケーションを開発できます。
なお、本稿ではNode.jsについての詳細は解説しません。詳しくは記事「勢いで始めてみるNode.js Webアプリ開発」などを参考にしてください。
プラグインモジュールの解説でも少し触れましたが、Gruntのプラグインは「npm」を使用して管理します。
npmとは、「Node Package Manager」の略で、Node.js用パッケージモジュールを管理するためのツールです。これを使うと、Node.js用パッケージモジュールのインストールや登録を行えます。
% npm install -g grunt-cli
つまり、Gruntのプラグインモジュールは、実際はNode.jsのパッケージモジュールとして扱われるということです。
なお、npmはNode.jsをインストールすると自動的にインストールされ、使えるようになります。
では、Node.jsとGruntをインストールしてみましょう(※筆者はMac OS X(10.9.1)を使用)。
Node.jsのダウンロードページから、自分のプラットフォームにあったバイナリをダウンロードして、インストールしましょう。
Macの場合は「Homebrew」や「NVM」を使用してインストールしても構いません。
Node.jsのインストールができたら、コンソールで動作確認してみましょう(※下記バージョンは2014年2月時点で最新のものです)。
% node -v v0.10.25 % npm -v 1.3.21
Node.js、npmともにインストールできているのが分かります。
Gruntのインストールはnpmを使用して簡単に行えます。次のようにgrunt-cliパッケージをインストールしましょう。
% npm install -g grunt-cli
Gruntがインストールできているか確認します。gruntコマンドを次のように実行して、バージョンが表示されればインストール完了です。
% grunt -version grunt-cli v0.1.13
Gruntを試す環境ができたので、次の章で実際にプロジェクトを作成して動作確認をしてみましょう。
ここからは実際にGruntを使ってみます。まずは、次のように適当なディレクトリを作成してください。
% mkdir path/your/gruntSampleApp % cd path/your/gruntSampleApp
Gruntを使用する際に必要なファイルは2つあります。先に紹介した「Gruntfile.js」と「package.json」です。
package.jsonはNode.jsが依存ライブラリなどの環境情報を管理するための設定ファイルです。次のように「npm init」コマンドを実行してください。
% npm init
プロジェクト名やその説明など、幾つか対話形式で質問をされますが、そのままエンターキーを押していってください。package.jsonファイルが生成されます。
次に、gruntモジュールをインストールしましょう。プロジェクトごとにGruntのバージョンが違うこともあるため、gruntモジュールは個別にインストールします。
% npm install grunt --save-dev
save-devオプションを付けると、「package.jsonのdevDependencies」プロパティにモジュールを追加してくれます。先ほど生成された「package.json」を見てみてください。gruntモジュールが追加されています。
このpackage.jsonがあれば、他の環境でも「npm install」とすれば同じようにモジュールがインストールされます。
最後に、Gruntfile.jsファイルを作成しましょう。先ほど紹介したGruntfile.jsをそのまま使用します。
module.exports = function(grunt) { //Gruntの設定 grunt.initConfig({ pkg: grunt.file.readJSON('package.json') }); //defaultタスクの定義 grunt.registerTask('default', 'Log some stuff.', function() { //ログメッセージの出力 grunt.log.write('Logging some stuff...').ok(); }); };
ファイルが記述できたらGruntを実行してみてください。defaultタスクが実行されます。
Gruntでは、CoffeeScriptを使用してGruntfileを記述することもできます。先ほど記述したGruntfile.jsを削除し、Gruntfile.coffeeファイルを作成します。そして、下記内容でCoffeeScriptファイルを記述しましょう(内容は先ほどのGruntfileと同じです)。
#Gruntfile.coffee module.exports = (grunt) -> #Gruntの設定 grunt.initConfig pkg: grunt.file.readJSON "package.json" #defaultタスクの定義 grunt.registerTask "default","Log some stuff.",() -> grunt.log.write "Logging some stuff..."
gruntコマンドを実行してみてください。同じようにdefaultタスクが実行されます。
このように、GruntではJavaScript/CoffeeScriptどちらでも記述可能です。
今回はいろいろなビルドツールやGruntの概要を説明し、Gruntのセットアップと動作確認について解説しました。
今回は、まだ役に立つようなタスクは実行させてませんが、今後はWebアプリ開発を行っていくに当たり、Gruntとそのプラグインモジュールを使っていろいろな処理を自動化させる手法を紹介していきます。
中村修太(なかむら しゅうた)
クラスメソッド勤務の新しもの好きプログラマです。昨年、東京から山口県に引っ越し、現在はノマドワーカーとして働いています。好きなJazzを聴きながらプログラミングするのが大好きです。
Copyright © ITmedia, Inc. All Rights Reserved.