連載
» 2014年03月04日 18時00分 UPDATE

Gruntで始めるWeb開発爆速自動化入門(1):ブラックなWeb開発現場の救世主、Gruntのインストールと使い方 (2/2)

[中村修太,クラスメソッド]
前のページへ 1|2       

Gruntを使用する際に必要な技術

 Gruntのインストールの前に、Gruntに関連する技術を簡単に解説します。

Node.jsとは

 先ほども言ったように、GruntはNode.js上で動作します。Node.jsはGoogle ChromeのJavaScript実行環境(V8)をベースに構築されたサーバーサイドJavaScriptのプラットフォームです。JavaScriptを使用してイベント駆動でノンブロッキングIOモデルのアプリケーションを開発できます。

grunt1_03.jpg Node.js公式サイト

 なお、本稿ではNode.jsについての詳細は解説しません。詳しくは記事「勢いで始めてみるNode.js Webアプリ開発」などを参考にしてください。

npmとは

 プラグインモジュールの解説でも少し触れましたが、Gruntのプラグインは「npm」を使用して管理します。

grunt1_04.jpg npm公式サイト

 npmとは、「Node Package Manager」の略で、Node.js用パッケージモジュールを管理するためのツールです。これを使うと、Node.js用パッケージモジュールのインストールや登録を行えます。

% npm install -g grunt-cli
npm使用例(grunt-cliパッケージをインストール)

 つまり、Gruntのプラグインモジュールは、実際はNode.jsのパッケージモジュールとして扱われるということです。

 なお、npmはNode.jsをインストールすると自動的にインストールされ、使えるようになります。

Gruntの環境構築

 では、Node.jsとGruntをインストールしてみましょう(※筆者はMac OS X(10.9.1)を使用)。

Node.jsとnpmのインストール

 Node.jsのダウンロードページから、自分のプラットフォームにあったバイナリをダウンロードして、インストールしましょう。

 Macの場合は「Homebrew」や「NVM」を使用してインストールしても構いません。

 Node.jsのインストールができたら、コンソールで動作確認してみましょう(※下記バージョンは2014年2月時点で最新のものです)。

% node -v
v0.10.25
% npm -v
1.3.21

 Node.js、npmともにインストールできているのが分かります。

Gruntのインストール

 Gruntのインストールはnpmを使用して簡単に行えます。次のようにgrunt-cliパッケージをインストールしましょう。

% npm install -g grunt-cli

 Gruntがインストールできているか確認します。gruntコマンドを次のように実行して、バージョンが表示されればインストール完了です。

% grunt -version
grunt-cli v0.1.13

 Gruntを試す環境ができたので、次の章で実際にプロジェクトを作成して動作確認をしてみましょう。

Gruntを使ってみる

 ここからは実際にGruntを使ってみます。まずは、次のように適当なディレクトリを作成してください。

% mkdir path/your/gruntSampleApp
% cd path/your/gruntSampleApp

 Gruntを使用する際に必要なファイルは2つあります。先に紹介した「Gruntfile.js」と「package.json」です。

Node.jsが依存ライブラリなどの環境情報を管理するための設定ファイル「package.json」

 package.jsonはNode.jsが依存ライブラリなどの環境情報を管理するための設定ファイルです。次のように「npm init」コマンドを実行してください。

% npm init

 プロジェクト名やその説明など、幾つか対話形式で質問をされますが、そのままエンターキーを押していってください。package.jsonファイルが生成されます。

gruntモジュールをインストール

 次に、gruntモジュールをインストールしましょう。プロジェクトごとにGruntのバージョンが違うこともあるため、gruntモジュールは個別にインストールします。

% npm install grunt --save-dev

 save-devオプションを付けると、「package.jsonのdevDependencies」プロパティにモジュールを追加してくれます。先ほど生成された「package.json」を見てみてください。gruntモジュールが追加されています。

 このpackage.jsonがあれば、他の環境でも「npm install」とすれば同じようにモジュールがインストールされます。

Gruntfile.jsファイルの作成

 最後に、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の実行

 ファイルが記述できたらGruntを実行してみてください。defaultタスクが実行されます。

CoffeeScriptを使用してGruntfileを記述する

 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の概要を説明し、Gruntのセットアップと動作確認について解説しました。

 今回は、まだ役に立つようなタスクは実行させてませんが、今後はWebアプリ開発を行っていくに当たり、Gruntとそのプラグインモジュールを使っていろいろな処理を自動化させる手法を紹介していきます。

著者プロフィール

中村修太

中村修太(なかむら しゅうた)

クラスメソッド勤務の新しもの好きプログラマです。昨年、東京から山口県に引っ越し、現在はノマドワーカーとして働いています。好きなJazzを聴きながらプログラミングするのが大好きです。


前のページへ 1|2       

Copyright© 2017 ITmedia, Inc. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。