Javascript 如何循环数组并运行Grunt任务，将数组中的每个值作为Grunt选项传递

我有一个类似以下的数组：

var themes = grunt.option('themes') || [
    'theme1',
    'theme2',
    'theme3'
];

grunt.registerTask('compile:all', function() {
    themes.forEach(function(currentTheme) {
        grunt.option('theme', currentTheme);
        grunt.task.run('compile');
    });
});

还有另一个变量：

var theme = grunt.option('theme') || 'theme1';

这个值在我的grunt文件中的不同位置用于确定某些资产的路径等

长话短说，我运行以下命令为单个主题编译资产：

grunt compile --theme=theme2

我正在寻找一种方法来循环遍历主题数组，并使用适当的grunt.option运行

compile

grunt任务。基本上，我希望实现的目标相当于：

grunt compile --theme=theme1 && grunt compile --theme=theme2 && grunt compile --theme=theme3

我尝试了以下方法：

var themes = grunt.option('themes') || [
    'theme1',
    'theme2',
    'theme3'
];

grunt.registerTask('compile:all', function() {
    themes.forEach(function(currentTheme) {
        grunt.option('theme', currentTheme);
        grunt.task.run('compile');
    });
});

这会以适当的次数运行

编译

任务，但是

主题

选项似乎没有设置。所以我的Scss文件被生成，但它们是空的

我也试过：

grunt.registerTask('compile:all', function() {
    themes.forEach(function(currentTheme) {
        grunt.util.spawn({
            grunt : true,
            args  : ['compile', '--theme=' + currentTheme]
        });
    });
});

任务几乎立即完成，并显示一条“成功”消息，但它似乎什么也没做

我尝试过的最后一件事与上述类似，只是我尝试使用异步：

grunt.registerTask('compile:all', function() {
    themes.forEach(function(currentTheme) {
        var done = grunt.task.current.async();
        grunt.util.spawn({
            grunt : true,
            args  : ['compile', '--theme=' + currentTheme]
        }, done);
    });
});

但这项任务失败了。我真的不确定我会错在哪里

---

感谢您的帮助

我认为您的问题在于您的单个编译任务被

grunt.task.run（'compile'）排队，但在执行时，您的
主题.forEach
循环已完成，并且您的
主题
选项已设置为
主题
中的最后一个值

我认为您需要注册一个单独的任务，该任务负责设置
主题
选项并运行编译任务

grunt.registerTask('compile_theme', function (theme) {
    grunt.option('theme', theme);
    grunt.task.run('compile');
});

对于每个主题，您将在
compile:all
任务中排队执行此任务：

themes.forEach(function(currentTheme) {
    grunt.task.run('compile_theme:' + currentTheme);
});

如果希望能够在命令行中指定要编译的主题，则需要更新
compile:all
任务以读取所有
--theme=
参数，并强制该值为数组：

grunt.registerTask('compile:all', function () {
    var compileThemes = grunt.option('theme') || 'theme1';

    if (grunt.util.kindOf(compileThemes) === 'string') {
        compileThemes = [compileThemes];
    }

    compileThemes.forEach(function(currentTheme) {
        grunt.task.run('compile_theme:' + currentTheme);
    });
});

您可以按如下方式调用该命令：

grunt compile:all // compiles 'theme1'
grunt compile:all --theme=theme2 // compiles 'theme2'
grunt compile:all --theme=theme2 --theme=theme3 // compiles 'theme2' and 'theme3'

注意：此时您可能需要重命名
compile:all
任务，因为它不再需要编译所有主题

编辑

它不起作用，因为我们对
主题
选项期望过高。我们正试图使用它来获取在命令行中输入的主题，并在配置中动态组合值（例如，
dest:theme+'/app.js'
。按照我构建答案的方式，
theme
无法在配置中使用

相反，我会为配置中使用的
theme
使用一个配置变量。这意味着更新
compile\u theme
任务：

grunt.registerTask('compile_theme', function (theme) {
    grunt.config('theme', theme);
    grunt.task.run('compile');
});

我们需要通过将模板字符串替换为
主题来更新配置。例如：

dest: '<%= theme %>/app.js'

dest:'/app.js'
我认为您的问题在于，您的各个编译任务正在通过
grunt.task.run（'compile'）；
排队，但是，在它们执行时，您的
themes.forEach
循环已经完成，并且您的
theme
选项设置为
themes
中的最后一个值

我认为您需要注册一个单独的任务，该任务负责设置
主题
选项并运行编译任务

grunt.registerTask('compile_theme', function (theme) {
    grunt.option('theme', theme);
    grunt.task.run('compile');
});

对于每个主题，您将在
compile:all
任务中排队执行此任务：

themes.forEach(function(currentTheme) {
    grunt.task.run('compile_theme:' + currentTheme);
});

如果希望能够在命令行中指定要编译的主题，则需要更新
compile:all
任务以读取所有
--theme=
参数，并强制该值为数组：

grunt.registerTask('compile:all', function () {
    var compileThemes = grunt.option('theme') || 'theme1';

    if (grunt.util.kindOf(compileThemes) === 'string') {
        compileThemes = [compileThemes];
    }

    compileThemes.forEach(function(currentTheme) {
        grunt.task.run('compile_theme:' + currentTheme);
    });
});

您可以按如下方式调用该命令：

grunt compile:all // compiles 'theme1'
grunt compile:all --theme=theme2 // compiles 'theme2'
grunt compile:all --theme=theme2 --theme=theme3 // compiles 'theme2' and 'theme3'

注意：此时您可能需要重命名
compile:all
任务，因为它不再需要编译所有主题

编辑

它不起作用，因为我们对
主题
选项的期望太高。我们试图使用它来获取在命令行中输入的主题，并在配置中动态组合值（比如，
dest:theme+'/app.js'
。按照我构建答案的方式，
theme
不能在配置中使用

相反，我会为配置中使用的
theme
使用一个配置变量。这意味着更新
compile\u theme
任务：

grunt.registerTask('compile_theme', function (theme) {
    grunt.config('theme', theme);
    grunt.task.run('compile');
});

我们需要通过将模板字符串替换为
主题来更新配置。例如：

dest: '<%= theme %>/app.js'

dest:'/app.js'
如果要使用
forEach
方法构建一系列任务，请将任务推送到任务数组中，而不是在
forEach
块中运行：

grunt.registerTask('buildAll', function() {
    var tasks = [];
    themes.forEach(function(currentTheme) {
        tasks.push('compile:' + currentTheme);
    });

    grunt.tasks.run(tasks);
});

在
compile
任务中，可以使用
this.args[0]
将
currentTheme
传递给任务（对于普通任务），或者使用
this.target
传递给多任务：

grunt.registerTask('compile', function() {
    var theme = this.args[0];  // sets local variable for use within task.
    grunt.option('theme', this.args[0]);  //sets option that can be referenced within this instance of `compile` 
});

如果要使用
forEach
方法构建一系列任务，请将任务推送到任务数组中，而不是在
forEach
块中运行：

grunt.registerTask('buildAll', function() {
    var tasks = [];
    themes.forEach(function(currentTheme) {
        tasks.push('compile:' + currentTheme);
    });

    grunt.tasks.run(tasks);
});

在
compile
任务中，可以使用
this.args[0]
将
currentTheme
传递给任务（对于普通任务），或者使用
this.target
传递给多任务：

grunt.registerTask('compile', function() {
    var theme = this.args[0];  // sets local variable for use within task.
    grunt.option('theme', this.args[0]);  //sets option that can be referenced within this instance of `compile` 
});

使用for each对我来说从来都不起作用，但这是基于grunt的帮助文档：

我将列表添加到我的initConfig，即

grunt.initConfig({
    run_themes: {
        theme1: 'sdi',
        theme2: 'syd',
        theme3: 'phl'
    }});

然后：

我的sass定义使用类似这样的grunt.option（'theme'）在每个主题目录中放置相同编译css的副本，如sdi/default/…syd/default…phl/default

// compile our sass to css
sass: {
    // sass compilation for "dev", unminified files
    dev: {
        options: {
            style: 'expanded'
        },
        files: [{
            expand: true,
            cwd:'shared-resources/css/sass',
            src: ['*.scss', 'standalone/*.scss'],
            dest: "../<%= grunt.option('theme') %>/default/template-resources/css/dev",
            ext: '.css'
        }]
    }},

//将我们的sass编译成css
sass：{
//sass编译“dev”，未统一的文件
开发人员：{
选项：{
样式：“扩展”
},
档案：[{
是的，
cwd:“共享资源/css/sass”，
src:['*.scss'，'standalone/*.scss']，
dest:“../default/template resources/css/dev”，