Gruntをつかってみたー

すでに花粉症が始まった大熊猫です(@@)
さて、今回はビルド管理ツール「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の自動化や、ファイルの自動更新も行う事が可能です。

こちらは少々、解説が複雑になるので機会があれば紹介したいと思います。