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

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

[中村修太，クラスメソッド]

ついて来られてますか？ 複雑化／多様化したWeb開発

今回の主な内容

• ついて来られてますか？ 複雑化／多様化したWeb開発
• 代表的なビルドツールいろいろ
  • make
  • Ant
  • Maven
  • Gradle
• Web開発現場の救世主Gruntとは
• Gruntの定義ファイル「Gruntfile.js」
• Gruntのプラグインモジュールとは
• Gruntを使用する際に必要な技術
  • Node.jsとは
  • npmとは
• Gruntの環境構築
  • Node.jsとnpmのインストール
  • Gruntのインストール
• Gruntを使ってみる
  • Node.jsが依存ライブラリなどの環境情報を管理するための設定ファイル「package.json」
  • gruntモジュールをインストール
  • Gruntfile.jsファイルの作成
  • Gruntの実行
• CoffeeScriptを使用してGruntfileを記述する

連載目次

　一昔前であれば、HTML／JavaScript／CSSを使用してWebアプリを作成する場合、（筆者の経験では）所定の位置にファイルを置くだけでした。最近はHTML／JavaScript／CSS関連の技術も複雑化／多様化し、いろいろなことを考慮しなければなりません。

　例えばJavaScriptファイルの場合は、以下の作業を行うこともあるでしょう。

• minify（圧縮）や結合
• 単体テストの実行
• JSLint（構文チェック）の実行

　さらに、CoffeeScriptやTypeScriptを使用している場合にはコンパイル（JavaScript変換）を行う必要もあります。

　また、SCSS（Sass）やLESSなどのCSS拡張メタ言語を使用している場合にも、コンパイル（CSS変換）作業が必要です。

　ファイルを修正してビルドするたびに、これらの作業をいちいち手作業で行っていては非常に面倒でしょう。こういった面倒な作業を簡単に自動化するために、ビルドツールがあります。

代表的なビルドツールいろいろ

　ビルドツールの歴史は古く、皆さんも今まで何かしらのツールを使用したことがあるかと思います。代表的なものを幾つか紹介しましょう。

make

　ビルドツールとして最も有名なものではないでしょうか。コンパイル、リンク、テスト、インストールなどのルールを記述したファイル（Makefile）を使用し、作業を自動的に行います。

Ant

　XMLでビルドのルールを記述する、Java用のビルドツールです。代表的なIDEであるEclipseには、Antプラグインが標準で組み込まれています。

Maven

　Antに代わるものとして開発されたJava用プロジェクト管理ツールです。ビルドだけではなくライブラリの依存関係管理など、いろいろな機能を持っています。

Gradle

　GroovyのDSLを利用してビルドスクリプトを記述することのできるビルドツールです。Groovyを使用することで柔軟な記述が可能になっています。

　また、Mavenとも互換性があるので、タスクをそのまま利用可能になっています。

　これら以外にも言語や環境に応じたさまざまなビルドツールが存在します。こういったビルドツールのうちの1つが、本連載で紹介する「Grunt」です。

Web開発現場の救世主Gruntとは

　Gruntとは、先ほど紹介したような自動化のためのビルドツール（タスクランナー）です。

Grunt公式サイト

　Node.jsを使用し、ビルド用のスクリプト（Gruntfile.js）をJavaScriptで記述してタスクを定義します。

　また、後述する「プラグインモジュール」を使用して、タスクを独自に定義でき、任意の処理を行えます。

　Node.js上で動作しているため、Webサーバーを使用することやライブリロード（ファイル更新を検知して任意のタスクを実行）も可能です。

Gruntの定義ファイル「Gruntfile.js」

　ここでGruntの定義ファイルを見てみましょう。Gruntを使用したいアプリのディレクトリに「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();
  });
};

Gruntfile.js

　grunt.registerTaskで「default」というタスクを定義しています。ここではログメッセージを出力するだけの単純なタスクです。

　コンソールでgruntコマンドを入力することで、Gruntを実行できます。

% cd /path/your/gruntproject
% grunt
Running "default" task
Logging some stuff...OK
Done, without errors.

　また、以下で定義したタスクが実行されます。

grunt ｛タスク名｝

　「default」という名前のタスクは、タスク名を省略した場合に実行されるタスクです。もちろん、「grunt default」とコマンドで入力しても、同様の結果になります。

　以上が簡単なタスク定義ファイルとGrunt実行方法です。

Gruntのプラグインモジュールとは

　次にプラグインモジュールについて説明します。Gruntではプラグインモジュールを読み込むことにより、いろいろなタスクを実行可能です。

　例えば、ファイルを連結する、圧縮する、「JSHint」を実行するなど、よく使用されるような処理は、すでにプラグインモジュールとして用意されています。

　プラグインモジュールはGruntfile.js内でgrunt.loadNpmTasks関数を使用して読み込みます。

//uglify(圧縮)プラグインを読み込む例
grunt.loadNpmTasks('grunt-contrib-uglify');

　上記のようにGruntfile.jsで「grunt-contrib-uglify」プラグインを読み込めば、「uglify」タスクを使用できるようになります。

　プラグインモジュールは、Gruntの公式サイトのPluginsページ（英語）で探すことができます。

Gruntプラグイン検索ページ

　Gruntで実現したいタスクがある場合、まずはここで探してみてください。

　また、Gruntのプラグインモジュールは自分で作成して公開することも可能です。Node.jsのモジュールを使用するときもよく利用する「npm」を使って登録します。なお、自作プラグインの作成方法については、今後の連載で解説する予定です。

　次ページからは、Gruntをインストールして実際に使用してみましょう。