🧊

Gruntでディレクトリごとwatchしつつ、更新されたファイルだけにアレするには

アレはアレです。

それGruntでもできるよ!!
Gulpだなんだ言う前に、もっとちゃんとGrunt使わなきゃなと思いました。

Gruntfile.js

//...
  // いわゆるビルドの直前にやるみたく、何も気にせず全部をターゲットにしておく
  jshint: {
    files: ['/path/to/my/targets/**/*.js'],
    options: {
      jshintrc: '/path/to/my/.jshintrc'
    }
  },
  // こちらも同じく
  copy: {
    main: {
      cwd: '..',
      src: '**',
      dest: '/path/to/dest/dir',
      expand: true
    }
  },
  esteWatch: {
    options: {
      dirs: [
        '/path/to/js/**/',
        '/path/to/css/**/'
      ],
      livereload: {
        enabled: false
      }
    },
    js: function(filepath) {
      // 変更あったファイルだけjshint
      grunt.config(['jshint', 'files'], filepath);
      return ['jshint'];
    },
    css: function(filepath) {
      // 変更あったファイルだけcopy
      grunt.config(['copy', 'main', 'src'], filepath);
      return ['copy'];
    }
  };
//...

ポイント

js: function(filepath) {
  // 変更あったファイルだけjshint
  grunt.config(['jshint', 'files'], filepath);
  // その設定でタスク実行
  return ['jshint'];
}

grunt.configでもって、本来のタスクに設定されたプロパティを上書きして、タスクを実行。
そうすれば更新されたファイル単品だけでタスクを実行することができるという。

grunt.config

// 第一引数のみの場合は、grunt.config.get()と同じ
grunt.config('jshint');
// 第一引数は単品でも配列でもOK
grunt.config(['jshint']);
// 第一引数で深く攻めるなら配列になるやね
grunt.config(['jshint', 'files'], filepath);

// 第二引数がつくと、grunt.config.set()と同じ
grunt.config('jshint', { files: ['/hoge/*.js'] });

これはべんりー。