Gruntfileでのwatch定義の書き方のアンチパターン

Gruntのwatchタスクの定義の書き方で上手く行かなかったのでメモ。

つまづいた点

共通のSCSS/JSと、カテゴリ(ページ)内で使うSCSS/JSのいずれかが更新されたときにそのカテゴリに紐づくtaskを実行したいとして、下記のように書いてしまうと、共通SCSS/JS更新の際にすべてのtaskが発火しなかった。

Gruntfile.js(一部)

watch: {
    watch01: {
        files: [
            'src/common/scss/*.scss',   //共通SCSS
            'src/common/js/*.js',       //共通JS
            'src/category01/scss/*scss',
            'src/category01/js/*js'
        ],
        tasks: ['task01']
    },
    watch02: {
        files: [
            'src/common/scss/*.scss',   //共通SCSS
            'src/common/js/*.js',       //共通JS
            'src/category02/scss/*scss',
            'src/category02/js/*js'
        ],
        tasks: ['task02']
    },
    //   : (略)
}

解法

下記のように、共通SCSS/JSを監視するwatchとカテゴリごとのwatchとを分けておくと、
期待通りの実行内容になる。

Gruntfile.js(一部)

watch: {
    watch_default: {
        files: [
            'src/common/scss/*.scss',
            'src/common/js/*.js',
        ],
        tasks: ['default']
    },
    watch01: {
        files: [
            'src/category01/scss/*scss',
            'src/category01/js/*js'
        ],
        tasks: ['task01']
    },
    watch02: {
        files: [
            'src/category02/scss/*scss',
            'src/category02/js/*js'
        ],
        tasks: ['task02']
    },
    //   : (略)
}

---

よく考えれば上の例は変な書き方をしていたなあと思いましたが、
またうっかりやりそうなのでメモしておきます。