連載

2014年3月4日

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

JavaScriptメインでWeb開発を行う際にさまざまな作業を自動化して開発効率を爆発的に高めるツール（Grunt、Yeoman、Bowerなど）やエディター、IDE、実行環境などを紹介していく連載。初回は主なビルドツールを紹介し、Gruntの概要と特長、環境構築の仕方や基本的な使い方に加え、CoffeeScriptを使った設定も解説する。

[中村修太，クラスメソッド] PC用表示関連情報

LINE

Hatena

前のページへ | 　　　　　　

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

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

Node.jsとは

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

Node.js公式サイト

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

npmとは

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

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とそのプラグインモジュールを使っていろいろな処理を自動化させる手法を紹介していきます。

「Gruntで始めるWeb開発爆速自動化入門」バックナンバー

著者プロフィール

中村修太（なかむらしゅうた）

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