Question

是否可以同时运行两个监视任务？

我知道我可以在 watch 设置中执行任意数量的任务，只需启动 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 （生产）和 B （开发）之间的唯一区别是缩小和连接。我不需要同时启动 A 和 B 任务。

首先我带来了这个想法

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

但是这没用。只是第一次观看任务正在运行（ C 永远不会起作用）。这可能做我想要的吗？

Answer 1

我发现使用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"]);

Answer 2

编辑并发现在有一个logConcurrentOutput选项！更多信息：https://github.com/sindresorhus/grunt-concurrent#logconcurrentoutput。

Watch是一个奇怪的并发但阻塞的任务，因此您必须具有创造性才能使类似多任务的功能正常工作。

并发丢失了监视任务的所有输出，这是不理想的。

尝试在自定义任务中动态编写配置对象：

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');
});

Answer 3

最好也是唯一可行的解决方案是：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
                }
            }
        }

然后你使用焦点：来源或焦点：testu为方便起见。

JM。

Answer 4

grunt-concurrent或grunt-focus都是很好的解决方案，但它们都会破坏livereload功能。

我的解决方案是动态组合手表配置，并假设您不会同时运行这两种配置。

你可以做这样的事情

＆＃13;

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"]);

＆＃13;

Answer 5

2018年9月

您不再需要使用grunt-concurrent，现在已经内置了grunt，这是我当前项目之一的示例...

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']);
}

Answer 6

不用担心Gruntfile.js中的grunt.registerTask（），我有时会在命令行中将grunt作为后台进程运行：

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

您可以将命令作为批处理脚本使用，以更加方便。希望它会有所帮助。

Answer 7

我知道这不能直接回答问题，但我现在的解决方案是使用Gulp而不是Grunt。使用Gulp您可以编码而不仅仅是配置。所以你可以更自由地做你想做的事。

JM。

Answer 8

并发工作对我来说很好

concurrent: {
            options: {
                logConcurrentOutput: true
            },
            set1: ['watch:html', 'watch:styles'],
        },

grunt.registerTask('default', 'watch');
grunt.registerTask('htmlcss', ['concurrent:set1']);

Answer 9

只需更改端口地址和livereload端口即可。例如。如果端口是9000，则将其更改为8000并从35729重新加载到36729

如何同时运行两个grunt监视任务

9 个答案: