Gruntを触ってみた - Adwaysエンジニアブログ

皆さん、こんにちは！
13新卒のSEの井古田です。

本日はGruntについて紹介させて頂きます！

Gruntとは・・・
JavaScriptのタスクランナーです。ファイル圧縮やコンパイル、Lintなどの繰り返し実行しなければならないタスクを自動化することで、開発作業を楽にしてくれます。

今回は、実際にGruntを利用してJavaScriptとCSSの圧縮とファイル連結を行いたいと思います。
では、さっそく環境を整えて試してみます。

準備

Node.js

GruntはNode.jsベースのツールとして開発されたため、Grunt本体やそのプラグインは、npm(Node Package Manager)というモジュールとして公開されています。そのため、Gruntを利用するにはNode.jsの環境が必要です。Node.jsの環境がない方はこちらを参考に入れてみてください。

grunt-cliのインストール

システムグローバルなパスにインストールするために-gオプションをつけてます。

$ npm install -g grunt-cli

package.jsonの作成
モジュール郡の依存関係やバージョンを管理するために、package.jsonを作成します。
いろいろと聞かれると思いますが、基本的に全部「Enter」で問題ありません。

$ npm install init

grunt本体のインストール
--save-devオプションをつけてインストールすることによって、先ほど作成したpackage.jsonに自動で記録されていきます。

$ npm install --save-dev grunt

これで準備完了です！
では次に設定ファイルを書いていきます。

（1）はじめにGruntfile.jsを作成します。

↓ Gruntfile.js

module.exports = function (grunt) {
grunt.initConfig({});
grunt.registerTask('default', []);
};

まだタスク等は設定していませんが、実際にgruntが実行できるか試してます。
以下のコマンドで自動でGruntfile.jsが実行されます。

$ grunt
Done, without errors.

上記のように、"Done, without errors"が表示されれば成功です★

（2）タスクを追加していきます。
以下のようなディレクトリ構造を作成し、タスクを追加していきます。

・ディレクトリ構造

project
├css/
│├default.css
│└style.css
├js/
│├sample1.js
│└sample2.js
├min/　　　# Gruntで圧縮し連結したjsファイルとcssファイルを追加するディレクトリ
├package.json
└Gruntfile.js

↓ Gruntfile.js

module.exports = function (grunt) {
　// プラグインを読み込む
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');

grunt.initConfig({
uglify: { # 親タスク
dist: { # 子タスク
files: {
# 'min/sample.min.js'は作成されるファイル名と場所指定
'min/sample.min.js' : [
'src/sample01.js', # 圧縮、連結される対象のファイル
'src/sample02.js', # ↑同じ
]
}
}
},

cssmin: { # 親タスク
dist: { # 子タスク
files: {
　# 'min/base.min.js'は作成されるファイル名と場所指定
'min/base.min.css' : [
'css/default.css',　　# 圧縮、連結される対象のファイル
'css/style.css',　　　 # ↑同じ
]
}
}
}

});
# uglify, cssminの順でタスクが実行する
grunt.registerTask('default', ['uglify', 'cssmin']);
};

カッコばっかりでものすっごい見づらいですね。すみません。
では、実行してみます。の前に、'grunt-contrib-uglify'と'grunt-contrib-cssmin'というプラグインを利用しているので、インストールします。

$npm install --save-dev grunt-contrib-uglify grunt-contrib-cssmin

package.jsonを見てみると追加されているのが分かります。
では、実行してみます。

$ grunt
Running "uglify:dist" (uglify) task
File "min/sample.min.js" created.
Running "cssmin:dist" (cssmin) task
File min/base.min.css created.

Done, without errors.

無事タスクを実行できました。ファイルが作成されていると思います。