下準備
インストール
npm install -g grunt-cli
プロジェクトの作成
npm init
package.jsonの作成。対話式で色々と入れていく。最初の所でgruntって名前にしちゃうとおかしくなるっぽい。
sudo npm install grunt grunt-contrib --save-dev
node_modulesディレクトリの作成。依存関係プラグインとかがごそっと入る。
gruntにはおすすめプラグイン集みたいなのがあってgrunt-contribでそれらが全部ごそっと入る。超便利。
あ、あと何故かsudoでないとだめっぽい。謎。
ここまでで、node_modules package.jsonが出来てるはず。
Gruntfile.coffeeの作成
まずは、Gruntfile.coffeeを作る。
touch Gruntfile.coffee
んでもってひな形の挿入。Gruntfile.coffeeに以下を書き込みます。
module.exports = (grunt) ->
すべての設定はこのmodule.exportsの中に書き込んで行く、みたいな感じです。
ではgrunt -hを実行してみましょう。grunt -hではGruntfileを解析して利用可能なタスクを確認することが出来ます。
Available tasks
(no tasks found)
この時点ではまだ何も登録されていないはず。
次にプラグインの読み込みを行います。
module.exports = (grunt) ->
pkg = grunt.file.readJSON 'package.json'
for taskName of pkg.devDependencies when taskName.substring(0, 6) is 'grunt-'
grunt.loadNpmTasks taskName
pkg行はパッケージファイルの読み込みを、その下のforブロックではパッケージの依存関係からgrunt-系のプラグインをタスクとして読み込んでいます。
grunt.loadNpmTasks "pluginname" でプラグインの読み込み、というわけです。
ここは多分grunt.loadNpmTasks "grunt-contrib"でもOKなはず。
Gruntfile.coffeeを上記のように書き換えたら再度grunt -h で登録されたタスクを確認。一気にタスクが追加されているはずです。
Available tasks
concat Concatenate files. *
copy Copy files. *
sass Compile Sass to CSS *
compass Compile Sass to CSS using Compass *
csslint Lint CSS files with csslint *
coffee Compile CoffeeScript files into JavaScript *
htmlmin Minify HTML *
cssmin Minify CSS files *
jst Compile underscore templates to JST file *
clean Clean files and folders. *
compress Compress files. *
watch Run predefined tasks whenever watched files change.
requirejs Build a RequireJS project. *
uglify Minify files with UglifyJS. *
connect Start a connect web server. *
handlebars Compile handlebars templates and partials. *
jshint Validate files with JSHint. *
stylus Compile Stylus files into CSS *
jade Compile jade templates. *
jasmine Run jasmine specs headlessly through PhantomJS. *
qunit Run QUnit unit tests in a headless PhantomJS instance. *
imagemin Minify PNG and JPEG images *
less Compile LESS files to CSS *
nodeunit Run Nodeunit unit tests. *
yuidoc Create YUIDocs *
ただこのままではほとんど使い物にもならないので、各タスクごとの設定をしていかないと行けません…
grunt task -h とかでタスクごとのヘルプが見れれば楽なのに…
taskファイルの設定方法(共通編)
ほとんどのタスクが「ファイル」に対する操作となっているため,ファイルに関する設定の書き方には共通の記法が用意されています。
Compact Format
src-destの形式で記述する方法。
grunt.initConfig
concat:
src: ['src/bb.js', 'src/bbb.js']
dest: 'dest/b.js'
Files Object Format
ハッシュのkey=>value でdist=>sourceを指定する方法。
grunt.initConfig
concat:
files:
'dest/a.js': ['src/aa.js', 'src/aaa.js'],
'dest/a1.js': ['src/aa1.js', 'src/aaa1.js'],
Files Array Format
配列で指定する方法。
grunt.initConfig
concat:
files:
{src: ['src/aa.js', 'src/aaa.js'], dest: 'dest/a.js'},
{src: ['src/aa1.js', 'src/aaa1.js'], dest: 'dest/a1.js'},
各タスクプラグインごとの細かい設定のあれこれについては、各タスクプラグインのgithubリポジトリとかを参照するといいかも。