如何让 grunt-watch 在不同的构建任务下实时重新加载 HTML 更改

我可以通过执行以下操作轻松设置 Grunt 文件以实时重新加载 HTML 和 SCSS 更改：

watch: {
    options: {
        livereload: true,
    },
    css: {
        files: ['scss/*.scss'],
        tasks: ['compass']
    },
    html: {
        files: ['index.html'],
        tasks: ['build']
    }
}

但是，我有一个开发环境的构建任务：dev，以及生产环境的构建任务：build。因此，调用build当 HTML 更改时，将构建用于生产的网站，如果我只想要开发版本，这不是我想要的。

理想情况下我会做类似的事情：

watch: {
    options: {
        livereload: true,
    },

    dev: {
        html: {
            files: ['<%%= yeoman.app %>/*.html',
                    '<%%= yeoman.app %>/**/*.html'],
            tasks: ['dev']
        },

        css: {
            files: ['<%%= yeoman.app %>/assets/scss/*.scss'],
            tasks: ['compass']
        }
    },

    dist: {
        html: {
            files: ['<%%= yeoman.app %>/*.html',
                    '<%%= yeoman.app %>/**/*.html'],
            tasks: ['build']
        },

        css: {
            files: ['<%%= yeoman.app %>/assets/scss/*.scss'],
            tasks: ['compass'],
        }
    }
}

从而能够调用watch:dev or watch:dist，但是这段代码不起作用。

我能想到的唯一解决方法是：

…
    dev: {
        files: ['<%%= yeoman.app %>/*.html',
                '<%%= yeoman.app %>/**/*.html',
                '<%%= yeoman.app %>/assets/scss/*.scss'],
        tasks: ['dev']
    },

    dist: {
        files: ['<%%= yeoman.app %>/*.html',
                '<%%= yeoman.app %>/**/*.html',
                '<%%= yeoman.app %>/assets/scss/*.scss'],
        tasks: ['build']
    }
…

再次打电话watch:dev or watch:dist，但这样做的缺点是，当我只更改少量 SCSS 时，我不想重建整个站点。

有什么办法可以实现我所追求的目标吗？

尝试动态别名任务：

grunt.registerTask('watchit', function(type) {
  grunt.config('watch.html.tasks', type);
  grunt.task.run('watch');
});

然后调用它grunt watchit:build or grunt watchit:dev在两者之间切换。

更多信息请点击这里：http://gruntjs.com/frequently-asked-questions#dynamic-alias-tasks http://gruntjs.com/frequently-asked-questions#dynamic-alias-tasks