Grunt.js始めました

若干流行に乗り遅れた感があるんですが、Grunt.jsを使い始めました。 今の案件で使った方が良いかなーという感じになりましたので…。

現在、色々ワケありまして、開発環境での確認でもJavaScriptはconcat、あとはsassも使っているので こちらもコンパイルしないと確認ができないという環境の為に、一々ファイルを保存する度にコマンド叩くのもなー という事でGrunt.jsを使う事に決定しました。sassはwatchコマンドありますけどもね。

で結局watchして、ファイルの変更があったらコマンドを叩くっていうのは結構すぐに終わって快適になったんです。(grunt-execのおかげ) しかし、色々と欲が出てきたので、ちょっと試行錯誤してみたらハマったのでメモ。

やりたかった事は、同じディレクトリにあるJSONファイルにconcat用の設定を外出しにして、grunt.jsではそれを読み込むだけにしたいって事でした。 が、ドキュメント見たりしてもそんなのどこにも書いてない。最初は<json:file.json>を設定してあげて、それを読み込めばいいかと思ったら、 Object.keyがObjectじゃないの読み込んでるよーってエラーが出てしまい…。こんなのですね。

• JSON

{
  "dest": {
    "src": ['hoge.js', 'fuga.js'],
    "dest": 'dest/common.js'
  },
  "product": {
    "src": ['hoge.js', 'fuga.js'],
    "dest": 'js/common.js'
  }
}

• JavaScript

module.exports = function(grunt) {
  grunt.initConfig({
    js_concat: '<json:dest.json>',
    concat: '<%= js_concat %>'
  });
};

こっから、grunt.registHelper()使ってみたりしたり試行錯誤した結果…。単純にこんな風にすれば良かっただけでした。

• JSON

{
  "dest": {
    "src": ['hoge.js', 'fuga.js'],
    "dest": 'dest/common.js'
  },
  "product": {
    "src": ['hoge.js', 'fuga.js'],
    "dest": 'js/common.js'
  }
}

• JavaScript

module.exports = function(grunt) {
  grunt.initConfig({
    concat: grunt.file.readJSON('dest.json');
  });
};

フタを開けたらどうって事ないですけども、見つけるまでは大変といういつものパターンでしたが、色々と勉強になりました。 これってあんまりニーズ無いのか、探し方が悪いのかそんなにググル先生にも答えてもらえなかった…。

本格的にGrunt.jsでビルドして本番にっていうのはしないはずですが、開発時には最大限に楽出来るようにもう少し色々と見てみようかと 思ってます。個人でも使ってみよう。