いまからでも余裕で間に合う Grunt の始め方 :: 短縮版

社内の新人向けに作った。

Grunt とは

自動で決められたことをやってくれるツールです。
ビルドツールなんて呼ばれています。

Grunt: The JavaScript Task Runner

どうやって動いてるの?

node.js で動いています。

簡単な始め方

node.js が動いていることが前提なので node.js と npm が動くことを確認してからはじめましょう。

> node -v
> npm -v

もしインストールしてなかったら...

node.js

Grunt-cliをインストール

最初にコマンドラインインターフェースこと CLI をインストールしておきます。

> npm install -g grunt-cli

Grunt に必要なファイルを知ろう

package.json
- 必要な npm プラグインを記述する
gruntfile.coffee (gruntfile.js)
- 実行するタスクを記述する

package.json を作る

package.json は自分で書くのも面倒なので、自動で作りましょう。

npm init を実行すると、実行した場所に package.jsonを作成してくれますので、適当なフォルダの中で実行してみましょう。

> mkdir c:\nya
> cd c:\nya
> npm init

これで c:\nya の中に最低限の package.json を作成してくれます。

package.json の記述内容を詳しく知りたい人は...
package.json

Grunt プラグインをインストールする

package.json のある場所で、Grunt プラグインをインストールします。

プラグインはインストールをするときに --save-dev を付けると、package.json に追記してくれます。

> npm install grunt --save-dev

package.json を確認すると...

  //　略
  "devDependencies": {
    "grunt": "^0.4.5"  // ← この行が追加された
  }

gruntfile.coffee(gruntfile.js) を作る

実行したいタスクである gruntfile は、自分で書く必要がありますが一度書けばなんとかなく勘所は掴めると思います。

#gruntfile.coffe
module.exports = (grunt) ->

	# タスク '猫'を作る
	grunt.registerTask 'neko', ->
		# 文字列出すよ
		grunt.log.write "吾輩は猫だにゃー"

	# default の後ろに実行したいタスクの名前を書く
	grunt.registerTask 'default', ['neko']

Grunt を実行してみる

> grunt
>
> Running "neko" task
> 吾輩は猫だにゃー
> Done, without errors.

やりたいタスクがいっぱいあるんだけど!?

こちらのプラグイン置き場から良さそうなのを探すといいよ。

Plugins - Grunt: The JavaScript Task Runner

実際にプラグイン使うときには package.json を読み込むように gruntfile に記述したりとかもします。

#gruntfile.coffe
module.exports = (grunt) ->
	pkg = grunt.file.readJSON 'package.json'

	# 略

プラグインの使い方は別のサンプルを見たほうがよろしいかと思いますので、ばっさり割愛。

始めるまでは物凄く敷居が高く思えましたが、やってみると意外と楽でした。
最初は小さく始めるのがよろしいかと思います。

kwsktr's study log

kwsktr のおべんきょログ