web-dev-qa-db-ja.com

2つのうっとりする監視タスクを同時に実行する方法

2つの監視タスクを同時に実行することはできますか?

watch settingsの中に必要なタスクをいくつでも持つことができ、grunt watchを起動するだけで、すべてのタスクをこのように監視できることを理解しています

...
watch: {
    A: {
        files: "js/dev/**/*.coffee",
        tasks: ["coffee", "requirejs"]
    },
    B: {
        files: "js/dev/**/*.coffee",
        tasks: ["coffee"]
    },
    C: {
        files: "js/dev/**/*.html",
        tasks: ["copy"]
    }
}
...

...しかし、私はこれを必要としません。開発用と本番用の異なるタスクセットが必要です。ご想像のとおり、[〜#〜] a [〜#〜](production)と[〜#〜] b [〜#〜](開発)は、縮小と連結です。 [〜#〜] a [〜#〜][〜#〜] b [〜#〜]を同時に起動する必要はありません。

最初にこのアイデアを思いつきました

grunt.registerTask("prod", ["watch:A", "watch:C"]);
grunt.registerTask("dev", ["watch:B", "watch:C"]);

しかし、これはうまくいきませんでした。最初の監視タスクが機能しているだけです([〜#〜] c [〜#〜]は機能しません)。私が望むことをすることは可能ですか?

58

私は grunt-concurrent が機能することを発見しました:

concurrent: {
  options: {
    logConcurrentOutput: true
  },
  prod: {
    tasks: ["watch:A", "watch:C"]
  },
  dev: {
    tasks: ["watch:B", "watch:C"]
  }
}

次に:

grunt.registerTask("prod", ["concurrent:prod"]);
grunt.registerTask("dev", ["concurrent:dev"]);
74
Nicolas Hery

EDIT:コンカレントにlogConcurrentOutputオプションが追加されました!詳細はこちら: https://github.com/sindresorhus/grunt-concurrent#logconcurrentoutput

ウォッチは奇妙な並行タスクですが、ブロッキングタスクなので、マルチタスクのような機能を機能させるには創造力が必要です。

コンカレントは監視タスクからのすべての出力を失いますが、これは理想的ではありません。

カスタムタスクで構成オブジェクトを動的に記述してみてください。

grunt.registerTask('watch:test', function() {
  // Configuration for watch:test tasks.
  var config = {
    options: {
      interrupt: true
    },
    unit: {
      files: [
        'test/unit/**/*.spec.coffee'
      ],
      tasks: ['karma:unit']
    },
    integration: {
      files: [
        'test/integration/**/*.rb',
        '.tmp/scripts/**/*.js'
      ],
      tasks: ['exec:rspec']
    }
  };

  grunt.config('watch', config);
  grunt.task.run('watch');
});
18
RobW

最良かつ唯一の有効なソリューションがあります: https://npmjs.org/package/grunt-focus このプラグインを追加してから:

focus: {
            sources: {
                include: ['js', 'html', 'css', 'grunt']
            },
            testu: {
                include: ['js', 'html', 'css', 'testu', 'grunt']
            },
            testi: {
                include: ['js', 'html', 'css', 'testu', 'testi', 'grunt']
            }
        },
        watch: {
            js: {
                files: paths.js,
                tasks: ['jshint'],
                options: {
                    livereload: true
                }
            },
            html: {
                files: paths.html,
                options: {
                    livereload: true
                }
            },
            css: {
                files: paths.css,
                tasks: ['csslint'],
                options: {
                    livereload: true
                }
            },
            testu: {
                files: ['test/**/*.js', 'test/**/*.css'],
                tasks: ['mochaTest'],
                options: {}
            },
            testi: {
                files: ['test/**/*.js', 'test/**/*.css'],
                tasks: ['exec:cleanTestDB', 'protractor_webdriver', 'protractor'],
                options: {}
            },
            grunt: {
                files: ['Gruntfile.js', 'server/config/env/*.js'],
                options: {
                    reload: true
                }
            }
        }

次に、便宜上focus:sourcesまたはfocus:testuを使用します。

JM。

11
jmcollin92

grunt-concurrentまたはgrunt-focusはどちらも優れたソリューションですが、どちらもlivereload機能を破壊します。

これに対する私の解決策は、両方の構成を同時に実行しないことを前提に、監視構成を動的に構成することです。

このようなことができます

grunt.config.merge({
  watch: {
    options: {
      livereload: true
    },
    C: {
      files: "js/dev/**/*.html",
      tasks: ["copy"]
    }
  }
});

grunt.registerTask('watch-forProd', function () {
  grunt.config.merge({
    watch: {
      A: {
        files: "js/dev/**/*.coffee",
        tasks: ["coffee", "requirejs"]
      }
    }
  });

  grunt.task.run('watch');
});

grunt.registerTask('watch-forDev', function () {
  grunt.config.merge({
    watch: {
      B: {
        files: "js/dev/**/*.coffee",
        tasks: ["coffee"]
      }
    }
  });

  grunt.task.run('watch');
});

grunt.registerTask("prod", ["watch-forProd"]);
grunt.registerTask("dev", ["watch-forDev"]);
7
Alex Shnayder

2018年9月

Grunt-concurrentを使用する必要はもうありません.

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        sass: {
            theme: {
                files: {
                    '../../web/sites/all/themes/ifafri/css/generated/theme_ifafri_master.css' : '../../web/sites/all/themes/ifafri/css/master.scss'
                }
            },
            bootstrap: {
                files: {
                    '../../web/sites/all/themes/ifafri/css/generated/theme_ifafri_bootstrap.css' : '../../web/sites/all/themes/ifafri/css/bootstrap/master.scss' 
                }
            }
        },
        watch: {
            theme: {
                files: '../../web/sites/all/themes/ifafri/css/*.scss',
                tasks: ['sass:theme'],
                options: {
                    spawn: false,
                    livereload: true,
                    nospawn: false
                }
            },
            bootstrap: {
                files: '../../web/sites/all/themes/ifafri/css/bootstrap/*.scss',
                tasks: ['sass:bootstrap'],
                options: {
                    spawn: false,
                    livereload: true,
                    nospawn: false
                }
            }
    }
    });
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-livereload');
    grunt.registerTask('default',['watch']);
}
3
Simon

Gruntfile.jsのgrunt.registerTask()を心配することなく、バックグラウンドプロセスとしてgruntをコマンドラインに実行することがあります。

$ grunt watch:A &
$ grunt watch:C &

より便利なように、コマンドをバッチスクリプトとして作成できます。うまくいけばそれが役立つ。

1
user3487528

私はこれが質問に直接答えないことを知っていますが、私の解決策はGruntの代わりにGulpを使用することです。 Gulpを使用すると、構成するだけでなくコーディングすることができます。だから、あなたはあなたがやりたいことをもっと自由にできます。

JM。

0
jmcollin92