tech

Gruntダイエットで健やかな開発を

/img/photo/2014-1-28.jpg

Gruntタスクでダイエットする話ではないです。

Gruntfile.jsを10行にした話@watilde on Qiita

このエントリを見てGruntfileのダイエットをしてみた。

激ヤセGruntfile

コメントを消せば9行。スッキリ！

config.jsでタスクの管理

使うタスクはconnect: require("./connect")な感じで指定。requireで指定するのはgrunt.initConfigに記述していた内容が書いてあるファイル。
パスはconfig.jsから見た相対パスで指定。

package.json

package.jsonは普通。

各タスクの中身

タスクファイルの中身はこんな感じ。

これらのファイルをconfig.jsで指定して使う。なんのタスクなのかファイルの先頭にコメントで入れておくと良い気がするので入れてる。

かなり管理しやすい。再利用も容易。

良い

普通にGruntfileに全部記述するやり方のときはプロジェクト毎に合わせたタスクを毎回書いてた。
コピペで使うにしてもちょっと手間がかかる。

このやり方だと自分用のテンプレを容易して

  • コピーしてconfig.jsで使いたいタスクを指定
  • 各タスクを編集(パスの書き換えとか)

するだけで済む。一度書いたタスクの再利用性が抜群に上がった。高まる。

自分用Gruntのスケルトンを作ろう

GruntのスケルトンをGitHubに作った。

nakajmg/GruntTemplate

ターミナルでこんな感じで使えばすぐに作業に入れる。

1
2
3
4
git clone git@github.com:nakajmg/GruntTemplate destfoldername
rm -rf destfoldername/.git
cd destfoldername
npm install

bashの関数に登録して全部コマンド一発でやってくれるようにした。

1
2
3
4
5
6
7
8
9
10
myGrunt(){
  if [ $# -ne 1 ]; then
    echo "usage:myGrunt need destfoldername"
  else
    command git clone git@github.com:nakajmg/GruntTemplate $1
    command rm -rf $1/.git
    command cd $1
    command npm install
  fi
}

これでmyGruntに引数でフォルダ名指定すればnpm installまで勝手にやってくれる。楽。

「このタスクどう書くんだっけなー。前に書いたGruntfileどこにあったかなー」的な時間がなくなるので大変良いと思う。

また一歩、牛さんと仲良くなれた気がする( ˘ω˘ )