みなさんはHTML/JS/CSSベースの開発をする際、どんな開発環境で開発していますか？今回は快適な開発環境を目指して、Gruntというタスクの自動化ツールを使ってみます。使用するGruntのバージョンは0.4.1です。
Gruntとは…？
Gruntとは、ファイルのコピーや削除、JS/CSSのminifyなどの作業を自動化してくれるビルドツールです。Node.jsベースで動作しており、コマンドラインで使用します。ファイルのコピーや削除は人の手が入るほどミスが発生しがちです。また、JS/CSSのminifyはオンラインで行えるものもありますが、修正の度にすべてのファイルに手動で実行するのは大変手間がかかります。このような単純作業を自動化して、効率化を図ることができるのがGruntです。
Gruntのインストール
Gruntの動作には、Node.jsと、Gruntのコマンドラインインターフェースであるgrunt-cliが必要です。まず、この２つをインストールします。
■Node.jsのインストール
Node.jsはインストーラを使ってインストールします。Node.js公式サイトのトップページにINSTALLボタンがあるので、ここからインストーラをダウンロードしてください。画面の指示に従って進めて行けば、インストール完了です。コマンドプロンプトで「node -v」と入力し、バージョンが表示されればインストール成功です。
今回利用したバージョンは以下です。
- node 0.8.20
- npm 1.2.11
■grunt-cliのインストール
続いて、コマンドプロンプトで以下を実行します。
npm install -g grunt-cli
コマンドプロンプトで「grunt -v」と入力し、grunt-cliのバージョンが表示されればインストール成功です。「grunt-cli: The grunt command line interface. (v0.1.6)」のような表示が出ると思います。
■package.jsonの作成
gruntのコマンドラインインターフェースはインストールできましたが、まだgrunt本体はインストールされていません。次に、gruntのインストールに必要となるpackage.jsonを作成します。このファイルで、プロジェクト名やバージョン、依存パッケージなどの設定を保存しておきます。
任意のプロジェクトフォルダを作成し、プロジェクトフォルダ下で以下のコマンドを実行します。対話形式で必要な情報が質問されるので、都度入力します。何も入力せずEnterを推し進めていくだけでもデフォルト値の入ったpackage.jsonが作成されます。
npm init
package.json出力例は以下です。README.mdが無いという警告(npm WARN)が出ることがありますが、README.mdというファイルを作成してテキストを追加しておくと出てこなくなります。空ファイルでは駄目なようでしたので、必ず何かしらのテキストを入れておいてください。
{
”name”: “プロジェクトの名前”,
”version”: “0.1.0″,
”description”: “gruntの環境定義だよ”,
”repository”: “”,
”author”: “Dai Nippon Printing Co., Ltd.”,
”license”: “BSD”,
”readmeFilename”: “README.md”,
”devDependencies”: {
}
}
■gruntをローカルにインストール
いよいよgruntの本体をインストールします。grunt本体は、プロジェクトフォルダごとにローカルにインストールする構成になっています。プロジェクトフォルダ下で以下のコマンドを実行します。
npm install grunt –save-dev
「–save-dev」というパラメータをつけることで、そのプロジェクトで使用しているパッケージの情報をpackage.jsonに保存することができます。package.jsonのdevDependenciesの項目にgruntが追加されたのが確認できます。
”devDependencies”: {
“grunt”: “~0.4.1”
}
■必要なパッケージをインストール
JSやCSSのminify、ファイルの結合などの機能は、パッケージとして提供されています。grunt-contribというgrunt公式のプラグインパッケージをまるっとインストールするか、個別に必要なものをインストールします。
npm install grunt-contrib –save-dev
もしくは以下（例）
npm install grunt-contrib-cssmin –save-dev
パッケージ一覧
2013/4/23現在、grunt-contribに含まれているパッケージ一覧です。()の中はパッケージ名です。
JS/CSS縮小化系
- CSSファイルの縮小化 （grunt-contrib-cssmin）
- HTMLの縮小化 （grunt-contrib-htmlmin）
- JSの縮小化 （grunt-contrib-uglify）
- PNGやJPEGの画像最適化 （grunt-contrib-imagemin）
ファイル操作系
- ファイル、フォルダの削除 （grunt-contrib-clean）
- ファイル、フォルダの複製 （grunt-contrib-copy）
- ファイルの結合 （grunt-contrib-concat）
- gzip圧縮 （grunt-contrib-compress）
メタ言語等のコンパイル系
- CoffeScriptのコンパイル （grunt-contrib-coffee）
- Compassのコンパイル （grunt-contrib-compass）
- LESSのコンパイル （grunt-contrib-less）
- Sassのコンパイル （grunt-contrib-sass）
- Stylusのコンパイル （grunt-contrib-stylus）
- Jadeテンプレートのコンパイル （grunt-contrib-jade）
- Handlebarsテンプレートのプリコンパイル （grunt-contrib-handlebars）
- Underscoreテンプレートのプリコンパイル （grunt-contrib-jst）
構文チェック/テスト系
- CSSの構文チェック （grunt-contrib-csslint）
- JSの構文チェック （grunt-contrib-jshint）
- jasmineによるテスト （grunt-contrib-jasmine）
- Nodeunitによるテスト （grunt-contrib-nodeunit）
- QUnitによるテスト （grunt-contrib-qunit）
その他
- webサーバーへの接続 （grunt-contrib-connect）
- Requirejsによるプロジェクトの最適化 （grunt-contrib-requirejs）
- ファイルの更新監視 （grunt-contrib-watch）
- LiveReload(ブラウザの自動リロード) （grunt-contrib-livereload）
- YUIDocによるドキュメントの生成 （grunt-contrib-yuidoc）
Gruntfile.jsを作成する
最後に、プロジェクトディレクトリにGruntfile.jsファイルを用意します。Gruntで行いたいタスクの一覧はこのJSファイルに書いていくことになります。ベースとなるコードは以下です。
module.exports = function(grunt){
‘use strict’;
grunt.initConfig({
// package.jsonに設定されている内容を取得
// バージョンや名称などの情報を外部ファイルで共通化できる
pkg: grunt.file.readJSON(“package.json”),
// タスクの設定
タスク名:{
// タスクの対象となるファイルのパスや出力先等の設定
}
});
// プラグインの読み込み
grunt.loadNpmTasks(“使用するプラグイン名”);
// タスクに名前をつける
// ”default” はgruntコマンドを入力した際に行うデフォルトのタスク
grunt.registerTask(“default”, [“タスク名”]);
};
