更新多个文件时，如何防止 grunt 多次实时重新加载？答案

【问题标题】：How to prevent grunt from live reloading multiple times when multiple files are updated?更新多个文件时，如何防止 grunt 多次实时重新加载？
【发布时间】：2013-09-26 15:56:33
【问题描述】：

我有一个 grunt watch 任务，其中包含多个用于观看 LESS、CoffeeScript 等的子任务。

    watch:
        jade:
            files: ['<%= yeoman.app %>/*.jade']
            tasks: ['jade']
        less:
            files: ['<%= yeoman.css %>/*.less']
            tasks: ['less']
        coffee:
            files: ['<%= yeoman.scripts %>/*.coffee']
            tasks: ['coffee']
        edge:
            files: ['<%= yeoman.comp %>/*']
            tasks: ['edge']
        livereload:
            options:
                livereload: true
            files: [
                '<%= yeoman.app %>/*.html'
                '<%= yeoman.css %>/*.css'
                '<%= yeoman.scripts %>/*.js'
            ]

我还编写了一个自定义任务，负责处理一组经常更新的第 3 方文件。任务更新 3rd 方 javascript 和 html 文件中的多个路径，然后将它们重新分配到主项目中的适当位置。

问题是当这些文件中的每一个都被写入它们的目的地时，相关的 grunt 任务会运行，每个都会触发实时重新加载。因此，如果写入 4 个文件，则会发生 4 次单独的重新加载。

有没有什么办法可以配置监视任务以在“结束”时将所有实时重新加载事件合并到单个重新加载中？

【问题讨论】：

标签： javascript gruntjs livereload grunt-contrib-watch

【解决方案1】：

我没有亲自尝试过，但您可能会发现 tiny-lr 值得研究。如果您正在编写自定义任务，那么您可以向 tiny-lr 服务器发布请求以一次重新加载多个文件（您可以通过类似 grunt-shell 的方式执行此操作）：

# notify a single change
curl http://localhost:35729/changed?files=style.css

# notify using a longer path
curl http://localhost:35729/changed?files=js/app.js

# notify multiple changes, comma or space delimited
curl http://localhost:35729/changed?files=index.html,style.css,docs/docco.css

我不确定标准配置是否能满足您的要求，但值得一试：

grunt.loadNpmTasks('tiny-lr');
grunt.initConfig({
  watch: {
    reload: {
      files: ['**/*.html', '**/*.js', '**/*.css', '**/*.{png,jpg}'],
      tasks: 'tinylr-reload'
    }
  }
});

grunt.registerTask('reload', ['tinylr-start', 'watch']);

还有grunt-newer 仅根据更改的文件运行任务。我将它与我的手表设置一起使用，它可以节省大量时间，因为它不必每次只保存一个文件时处理每个文件。

希望这会有所帮助。

【讨论】：