すでに花粉症が始まった大熊猫です（@@）
さて、今回はビルド管理ツール「Grunt.js」のご紹介と実際に使ってみるまでを簡単にまとめてみました。
Gruntとは？
GruntはJavaScriptで作られたビルド管理ツールです。
SASSなどのCSSプリプロセッサーの管理やCSSやJavaScriptの結合や圧縮などの処理をタスクとして実行できます。
ビルド管理ツールは他にRuby(Rake)やJava(Make)で実行されるものがあります。
環境準備
Gruntを利用するための準備をはじめましょう。
Node.jsとnpm
以前に紹介したStyleDoccoと同じくGruntを利用するにはNode.jsとnpm(Node Packaged
Modules)のインストールが必要になります。
まずはターミナル(Windowsの場合はMINGW等)でnode.jsとnpmがインストール済みかを確認しましょう。
node -v v0.8.15 npm -v 1.1.66
こんな感じになればOK。
v0.3をアンインストール
※Gruntを初めてインストールされる人はこの節は飛ばしてください。
v0.3がグローバルでインストールされている人はまずアンインストールを行います。
npm uninstall -g grunt
Gruntのバージョンは本記事の投稿の少し前に0.4にバージョンアップしました。
今回の0.4では以前のバージョンである0.3から大幅に仕様が変更されました。
そのため、すでにバージョン0.3でgruntを触っている場合は必ずアンインストールが必要になります。
grunt-cliをインストール
grunt-cliはGruntのコマンドラインインターフェイスです。
Gruntのコマンドライン操作を行う為のものになります。
こちらをまずグローバルにインストールします。
npm install -g grunt-cli
これでひとまず環境の準備は終了です。
タスクを作ってみる
では実際にGruntをで実行するタスクを作っていきましょう。
まず、Gruntを使って何をしたいかを考えてみます。
今回やってみたいこと（タスク）を考える
今回は以下のタスクをGruntで行いたいと思います。
- SASSの管理
- CSSの圧縮
- JavaScriptファイルの結合
- JavaScriptファイルの圧縮
- 上記の処理の監視（Watch）
- ローカルホストを立てる（今回は「localhost:9000/）
用意したディレクトリ
今回のサンプルのために以下のディレクトリを用意します。
├── css ├── _sass │ └── style.scss ├── js │ ├──_src │ ├── test.js │ └── test02.js └── index.html
package.jsonを用意する。
以下のような「package.json」をディレクトリの直下に作成します。
{
"name": "プロジェクト名",
"description": "プロジェクトの説明",
"version": "1.0.0",
"author": "作成者名",
"dependencies": {},
"devDependencies": {}
}
Gruntに関するpackage.jsonの詳しい解説は一旦割愛致します。
以下が詳しいのでご覧下さい。
Gruntによる継続的なビルド環境を求めて 〜 package.jsonと0.4.0のこと ::ハブろぐ
Gruntのインストール
次にGruntのCoreをインストールします。
npm install grunt --save-dev
※グローバルインストールではなく、作業環境にインストールしてください。
package.jsonを確認すると以下のようになります。
{
"name": "プロジェクト名",
"description": "プロジェクトの説明",
"version": "1.0.0",
"author": "作成者名",
"dependencies": {},
"devDependencies": {
"grunt": "~0.4.0"
}
}
プラグインのインストール
今回必要なプラグインをインストールします。
必要なプラグインは以下の通りです。
grunt-contrib-concat grunt-contrib-uglify grunt-contrib-sass grunt-contrib-cssmin grunt-contrib-connect grunt-contrib-watch
npm installでプラグインもインストールします。
$ npm install [プラグイン] --save-dev
以下のコマンドで一気に実行もできます。
$ npm install grunt-contrib-concat grunt-contrib-uglify grunt-contrib-sass grunt-contrib-cssmin grunt-contrib-connect grunt-contrib-watch --save-dev
package.jsonが以下のように変更されます。
{
"name": "プロジェクト名",
"description": "プロジェクトの説明",
"version": "1.0.0",
"author": "作成者名",
"dependencies": {},
"devDependencies": {
"grunt": "~0.4.0",
"grunt-contrib-concat": "~0.1.3",
"grunt-contrib-uglify": "~0.1.1",
"grunt-contrib-sass": "~0.2.2",
"grunt-contrib-cssmin": "~0.4.1",
"grunt-contrib-connect": "~0.1.2",
"grunt-contrib-watch": "~0.2.0"
}
}
※尚、Gruntのコアデータ及びプラグインはnpmで把握している安定板がインストールされます。
Gruntfile.jsを作成
公式サイトやgithubに上がっているサンプルを見つつ以下を作成しました。
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
connect: {
server: {
options: {
port: 9000,
hostname: 'localhost'
}
}
},
watch: {
scripts: {
files: 'js/_src/*.js',
tasks: ['concat', 'uglify']
},
sass: {
files: '_sass/*.scss',
tasks: ['sass', 'cssmin']
}
},
concat: {
common: {
files: {
'js/all.js': [
'js/_src/test.js',
'js/_src/test02.js'
]
}
}
},
uglify: {
common: {
files: {
'js/all.min.js': 'js/all.js'
}
}
},
sass: {
common: {
options: {
style: 'expanded'
},
files: {
'css/style.css': '_sass/style.scss'
}
}
},
cssmin: {
compress: {
files: {
'css/style-min.css': 'css/style.css'
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['concat', 'uglify', 'sass', 'cssmin', 'connect', 'watch']);
}
タスク
今回行いたいタスクは以下の通り
concat -JavaScriptの結合 uglify -JavaScriptの圧縮 sass -SASSの管理 cssmin -CSSの圧縮 connect -サーバーを立てる watch -ファイルの監視
タスクを実行する
ではここまでに作ったタスクを実行してみます。
Gruntを実行
以下のコマンドをたたきます。
grunt
今回はdefault(標準)のタスクのみで実行できますのでこれでOKです。
上記を実行後、ディレクトリは以下のようになります。
実行の結果
問題がなく実行されれば、ターミナルは以下のように表示されると思います。
$ grunt Runnning "watch" task Waiting... /省略/ Running "connect:server" (connect) task Starting connect web server on localhost:9000. Running "watch" task Waiting...
一部省略していますがエラーが出なければOKです。
また、ディレクトリは以下のような状態になっているはずです。
├── css │ ├──style.css │ └──style-min.css ├── _sass │ └── style.scss ├── js │ ├──all.js │ └──all.min.js │ ├──_src │ ├── test.js │ └── test02.js │ ├──Gruntfile.js │ ├──package.json │ └── index.html
ローカルホストで確認
ローカルホストを立てましたので、問題がなければ今回の設定では「http://localhost:9000/」で確認できるようになります。
おわりに
今回はGruntの導入という事で比較的簡単なタスクを実行してみました。
Gruntは他にも以前に紹介したStyleDoccoの自動化や、ファイルの自動更新も行う事が可能です。
こちらは少々、解説が複雑になるので機会があれば紹介したいと思います。