Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

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']
    },
    //   : (略)
}

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

skwbr
Director / Designer
1pac
「デジタル・インタラクティブ領域」に強みをもち、クライアントの課題解決のための仕組みづくりをサポートするクリエイティブプロダクションです
https://1pac.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away