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

Question

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

3

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

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

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

理想情况下，我应该这样做：

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或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或watch:dist命令，但这样做的缺点是，当我只更改少量SCSS时，就不想重建整个站点。

有没有办法实现我想要的效果？

- Fisu

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kyle Robinson Young · Accepted Answer

尝试一下动态别名任务:

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

然后使用grunt watchit:build或grunt watchit:dev来切换这两个选项。

更多信息请参见：http://gruntjs.com/frequently-asked-questions#dynamic-alias-tasks