旧それなりブログの跡地、画像やスタイルやJSなどが壊れてることがあります。

Grunt-0.4用のシンプルなGruntfile.jsの例

2013年3月3日

誰かの役に立つかもしれないので、
さっき個人サービス用に作ったシンプルなGruntfile.jsを晒しておきます。

Gruntfile.js

やっていることは、

grunt watch

で関連ファイルの変更を検知して、以下を自動で実行する。

  • JSファイル群は、JSHint に掛けた後に全ファイル結合して all.js として保存する。
  • CSSファイル群は 圧縮・結合(今は元も１ファイルだけですが)して all.min.js として保存する。

watch でプロセスが立ち上がるのが嫌なら、

grunt

で、上記と同じことを明示的に実行する。

JSファイルの圧縮まで行う場合は、

grunt release

を、実行する。

補足

  • 0.4から構成がガラッと変わったらしく、ググり記事を参考にする場合はその点を注意する必要がある
  • 設定ファイル名は Gruntfile.js にする。grunt.js や gruntfile.js は古い設定
  • CSSを結合・圧縮するには、 grunt-contrib-cssmin を grunt-contrib とは別にインストールする必要がある。grunt-contrib に一緒に含まれていたのは以前のバージョン
  • 上記は grunt-contrib-cssmin であり grunt-contrib-mincss は古いバージョンのもの、タスク名も mincss ではなく cssmin でないと動かなくなっているので注意
  • grunt release は、オレオレ設定です。圧縮するタスク(uglify)は割と重く、開発中は邪魔になるので別にしたかった

参考サイト

最初は日本語記事を探したのですが、旧バージョンだったり、
「本当に使ってんの？」的な内容の記事だったりが多かったので、途中で諦めました。
今は、各種公式マニュアルや、GitHubのREADMEを読んだ方が手っ取り早いと思います。