鴨のいいカモです

ここでアヒルの話題は出てきません。予めご了承下さい。

Gruntの復習(5) 色々なタスクを追加しよう

grunt

Gruntの基本的なところはおさえられた気がするので、他にどのようなことができるか見てみることにします。

grunt-contribを見てみる

前回書いたように、contribと付いているプラグインはいわば公式プラグインのような扱いなのですが、その中で初めての人向けによく使いそうなものをまとめたプラグインがあります。その名もgrunt-contribプラグイン。ありがたい。

gruntjs/grunt-contrib · GitHub

ということで、まずはこのgrunt-contribプラグインに入っているものを見て、その中から自分に必要そうなものを選ぶのがよさげです。ということで見てみましょう。

  • grunt-contrib-clean ファイル・フォルダの掃除
  • grunt-contrib-coffee CoffeeScriptコンパイル
  • grunt-contrib-compass Sass+Compassコンパイル
  • grunt-contrib-compress ファイル・フォルダの圧縮
  • grunt-contrib-concat ファイル結合
  • grunt-contrib-connect Webサーバ起動
  • grunt-contrib-copy ファイル・フォルダのコピー
  • grunt-contrib-cssmin CSSの圧縮
  • grunt-contrib-csslint CSSのLint
  • grunt-contrib-handlebars Handlebarsコンパイル(JST)
  • grunt-contrib-htmlmin HTMLのminify
  • grunt-contrib-imagemin 画像のminify
  • grunt-contrib-jade Jadeのコンパイル
  • grunt-contrib-jasmine Jasmine実行
  • grunt-contrib-jshint JSHint実行
  • grunt-contrib-jst UnderScoreコンパイル(JST)
  • grunt-contrib-less LESSコンパイル
  • grunt-contrib-nodeunit NodeUnit実行
  • grunt-contrib-qunit QUnit実行
  • grunt-contrib-requirejs RequireJS最適化
  • grunt-contrib-sass Sassコンパイル
  • grunt-contrib-stylus Stylusコンパイル
  • grunt-contrib-uglify UglifyJSでJSのminify
  • grunt-contrib-watch watch
  • grunt-contrib-yuidoc YUIDocコンパイル

逆の観点から見ると、これらのツールがよく使われている、ということになりますね。

grunt-contribを使う

今までと同様にnpm install grunt-contrib --save-devを実行して、Gruntfile.coffeeにgrunt.loadNpmTasks 'grunt-contribと書くだけ。これで上記がすべて使えるようになります。上記はnpm一発で入りますし、個別に書く必要がないので、楽ですね。

ということで、grunt-contribを使って用途にあったものを作るのがよさそうです。

grunt-contribで気をつけるところ

すでにgrunt-contribほげほげプラグインを使っているところにgrunt-contribプラグインをnpm installすると、他プラグインとのバージョン依存でエラーになったりすることがあります。以下はgrunt-contrib-cssminを入れていたところにgrunt-contribを入れて出たエラーです。

npm ERR! peerinvalid The package grunt-contrib-cssmin does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer grunt-contrib@0.8.0 wants grunt-contrib-cssmin@~0.6.2

npm ERR! System Darwin 13.0.0
npm ERR! command "node" "/Users/masataka/.nodebrew/current/bin/npm" "install" "grunt-contrib" "--save-dev"
npm ERR! cwd /Users/masataka/src/grunt-test
npm ERR! node -v v0.11.10
npm ERR! npm -v 1.3.23
npm ERR! code EPEERINVALID
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR!     /Users/masataka/src/grunt-test/npm-debug.log
npm ERR! not ok code 0

Peer grunt-contrib@0.8.0 wants grunt-contrib-cssmin@~0.6.2とありますので、npm install grunt-contrib-cssmin@~0.6.2 --save-devとバージョン指定インストールを実施するか、npm uninstall grunt-contrib-cssminとアンインストールしてしまうのも手です。そして再度npm install grunt-contrib --save-devすると。

現場からは以上です。