Gruntを使い始めてから半年経った。Gruntは主にJavascriptとCSSファイルのminifyを自動化する目的で使用している。
Gruntとは
Gruntとは,JavaScriptで書いたタスクを実行してくれるアプリケーション(JavaScript Task Runner)である。面倒な作業として,以下のような作業があるが,Gruntを使うことでこれらを自動化することが出来る。
- minify(圧縮)や結合
- 単体テストの実行
- JSLint(構文チェック)の実行
- CoffeeScriptやTypeScriptを使用している場合にはコンパイル(JavaScript変換)の実行
- SCSS(Sass)やLESSなどのCSS拡張メタ言語を使用している場合には,コンパイル(CSS変換)の実行
Gruntの使い方
GruntはNode.jsを使用して作られている。そのためGruntをインストールする際には,あらかじめhomebrewなどでNode.jsをインストールしておく必要がある。
Gruntのインストール
Gruntは,Grunt本体とgrunt-cliが組み合わさって動作する。そのため,Grunt本体とgrunt-cliを一緒にインストールするが,コマンドから直接インストールするのではなく,package.jsonというファイルを作成し,このファイルを介してインストールする。
package.jsonを作成し,以下のように記述する。
{
"name": "my-project-name",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.3",
"grunt-cli": "~0.1.9"
}
}
package.jsonが存在するディレクトリで以下のコマンドを実行することで,package.jsonに記述したnodeモジュールをインストールすることが出来る。今回の場合はGruntをインストールすることが出来る。
npm install
このpackage.jsonというファイルはNode.jsのプロジェクトにおいて,そのプロジェクトの名称やバージョン,依存するモジュールを書いておくためのファイルである。Grunt自体もこのpackage.jsonを使って利用するプラグインを管理し,そしてGrunt自体もこのファイルへ依存モジュールとして登録する。
Gruntが,このような回りくどい管理方法を取っている理由は,Gruntのバージョンが異なるプロジェクトを単体のGruntでは同時に管理できない為である。
例えば,プロジェクトAではバージョン0.3.1を使っているが、プロジェクトBでは0.3.16を使っていて、マシンにはGrunt 0.3.16がインストールされている……という場合,始めのプロジェクトがビルドできなくなってしまう可能性がある。
続いてGruntfile.jsというgruntの設定ファイルを作成する。一纏めにして実行出来る個々の設定を「タスク」と呼ぶ。以下の内容でGruntfile.jsを作成する。
module.exports = function (grunt) {
grunt.registerTask('hello', 'description here', function() {
grunt.log.writeln('hello World!');
});
grunt.registerTask('default', [ 'hello' ]);
};
この状態でgruntコマンドを実行する。
grunt
以下のように表示されればタスクが成功している。
Running "hello" task hello World! Done, without errors.
JavascriptとCSSを自動的にminifyしてみる
今回,冒頭で触れたJavascriptとCSSのファイルをminifyする方法を説明する。
プラグインを追加インストールする
{
"name": "my-project-name",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.3",
"grunt-cli": "~0.1.9",
"grunt-contrib-cssmin": "0.4.1",
"grunt-contrib-uglify": "~0.4.0",
"grunt-contrib-watch": "~0.5.3"
}
}
上記のようにpackage.jsonに追記し,以下のプラグインを新たにインストールする。
- grunt-contrib-cssmin: CSSファイルをminifyする。
- grunt-contrib-uglify: JSファイルをminifyする。
- grunt-contrib-watch: ファイルの変更を監視してタスクをトリガーする。
package.jsonへ記述後,以下のコマンドでプラグインをインストールする。
npm install
Gruntfile.jsを作成する
プラグインがインストール出来たので,Gruntfile.jsにタスクを記述する。
記述例としては以下のようになる。ファイル名は適宜書き換えてほしい。
module.exports = function(grunt) {
grunt.initConfig({
cssmin : {
pc : {
src : ['css/reset.css', 'css/styles.css'],
dest : 'css/pc.min.css'
},
mobile : {
src : ['css/reset.css', 'css/styles.css', 'css/mediaqueries.css'],
dest : 'css/mobile.min.css'
}
},
uglify : {
build : {
options : {
banner : grunt.file.read('js/License.js'),
},
src : ['js/BitmapData.js', 'js/GlowFilter.js'],
dest : 'js/all.min.js'
}
},
watch : {
css_pc : {
files : ['css/reset.css', 'css/styles.css'],
tasks : ['cssmin', 'copy:css']
},
css_mobile : {
files : ['css/mediaqueries.css'],
tasks : ['cssmin:mobile', 'copy:css']
},
js : {
files : ['js/BitmapData.js', 'js/GlowFilter.js', 'js/License.js'],
tasks : ['uglify', 'copy:js']
}
},
});
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
};
CSSファイルとJSファイルの変更を監視し,変更があったファイルを自動的にminifyする。
エラーなどが出ずにminifyが正常に行われていれば成功である。
また,ファイルの変更を監視(grunt-contrib-watchを使用)しない場合はgruntコマンドを実行することでminifyを行うことが出来る。
grunt
各プラグイン毎の設定方法は以下のページに詳しく載っていた。
Plugins – Grunt: The JavaScript Task Runner
参考
現場で使えるGrunt入門 – Gruntを試そう | CodeGrid
「今どきのGruntを使ったフロントエンド開発(HTML/CSS編)」HTML5 Conference 2013 セッションレポート | HTML5Experts.jp
Gruntで始めるWeb開発爆速自動化入門(1):ブラックなWeb開発現場の救世主、Gruntのインストールと使い方 (1/2) – @IT