Gruntで処理をコンボする！

最近scssやjs, jadeのコンパイルや結合, min化にもっぱらgruntを使っています。

例えば

1. concatで、自作のjsを結合してmain.jsに、jQueryなどのライブラリを結合してlib.jsを作成
2. uglifyで、main.jsをmin化してmain.min.jsを作成
3. 再びconcatで、lib.jsとmain.min.jsを結合してmain.min.jsにする

の様に順番を決め処理をさせるGruntfileの書き方がやっと解ったのでメモ。

Gruntfile.js

module.exports = function(grunt) {
  var pkg = grunt.file.readJSON('package.json');

  grunt.initConfig({
    // JSファイルを結合
    concat: {
      options: {
        // 連結される各ファイル内の間に配置出力する文字列を定義
        separator: '\n'
      },
      compile: {
        files: {
          // ライブラリをlib.jsに、自作のjsはmain.jsにまとめる
          'public/assets/js/lib.js': ['dev/assets/js/lib/*.js'],
          'public/assets/js/main.js': ['dev/assets/js/*.js']
        }
      },
      concatAll: {
        // lib.jsとmain.min.jsを結合して main.min.jsにする
        src: [
          'public/assets/js/lib.js',
          'public/assets/js/main.min.js'
        ],
        dest: 'public/assets/js/main.min.js'
      }
    },
    // JSをmin化
    uglify: {
      options: {
        banner: '/*!\n * main.js <%= grunt.template.today("dd-mm-yyyy") %>\n */\n',
        mangle: true
      },
      compile: {
        files: {
          'public/assets/js/main.min.js': 'public/assets/js/main.js'
        }
      }
    },
    watch: {
      // JS
      js: {
        // 監視ファイル
        files: ['dev/assets/js/*.js', 'dev/assets/js/lib/*.js''],
        // 実行タスクを処理したい順番に配列で記述
        tasks: ['concat:compile', 'uglify:compile', 'concat:concatAll'],
        options: {
          nospawn: true
        }
      }
    }
  });

  for(var taskName in pkg.devDependencies) {
    if(taskName.substring(0, 6) == 'grunt-') {
      grunt.loadNpmTasks(taskName);
    }
  }

  grunt.registerTask('default', 'watch');
};

要は tasks に配列で処理を書くだけなのですが、、、
後はGruntfile.jsのあるディレクトリで

$ grunt

コマンドを叩いておくだけ。
監視対象のjsが変更されれば、自動的に main.jsと、ライブラリファイルとも結合されたmain.min.jsが出力されます。


後は、特にjadeなどで変更ファイル時にフォルダの中全部じゃなくて、変更ファイルのみで処理できるような書き方が知りたい。
coffeescriptが流行っているっぽい。みたいですが、個人的にあまり好きじゃないのでjsで書いています...