为什么我的 Gulp 构建任务设置不正确？

Question

我似乎对如何将任务存储在我的变量或其他东西中存在问题。我正在根据给定构建中的 css 文件、js 文件和站点的数量动态创建任务。这些是我正在处理的数组：

var styleNames = ['main'];
var scriptNames = ['main', 'head', 'libs'];
var siteNames = ['my-app', 'my-other-app'];

所以，我正在尝试为每个 siteNames 创建一个 main.css 和相关的 .js 文件。

//loop through style array and run function to build the tasks that should run on default
for (var style in styleNames) {
  prepareTasks(styleNames[style], "scss");
}
for (var script in scriptNames) {
 prepareTasks(scriptNames[script], "js");
}

这些运行：

function prepareTasks(filename, extension) {
//do this in a loop for every site
for (var site in siteNames) {
     var taskName = siteNames[site] + '-' + filename + '-' + extension;

     buildTasks.push(taskName);
     var paths = [];

     if (filename === 'main') {
        paths = [
            '!./src/' + extension + '/**/materialize/components/**',
            './src/' + extension + '/bootstrap/*.' + extension,
            './src/' + extension + '/plugins/*.' + extension,
            './src/' + extension + '/util/*.' + extension,
            '!./src/' + extension + '/**/*@*.' + extension,
            './src/' + extension + '/**/*.' + extension,
            './src/modules/**/*.' + extension       
        ]
     } else {
        paths = './src/' + extension + '/**/*@' + filename + '.' + extension;
     }

     if (extension === "scss") {
         console.log(taskName);
         console.log('^^ outside task in sass if')

        gulp.task(taskName, function() {
            console.log(taskName);
            console.log('^^ inside sass task')
            setScssTasks(siteNames[site], filename, paths);
        });

    } else if (extension === "js") {
        gulp.task(taskName, function() {
            setJSTasks(siteNames[site], filename, paths);
        });

    }

    watchTasks.paths.push(paths);
    watchTasks.taskNames.push(taskName);
}

};

在这些运行之后，gulp 的默认任务就设置好了：

gulp.task('default', buildTasks);

因此，当为“my-app-main-scss”运行任务时，console.log 会读取任务内的错误 taskName 和错误的 siteName[site]。它设置为数组中的最后一项。这是我整个代码的一个 jsfiddle：https://jsfiddle.net/zrcbzp99/ 这些任务如何设置不正确？

Answer 1

我认为这里的答案会对你有所帮助：

creating tasks using a loop [gulp]

在调用/调用您的 gulp 任务的功能时，您对 siteNames 的 For 循环将已经完成/到达最后一个 siteName。

试试这样的：

var siteNames = ['my-app', 'my-other-app'];

...

function prepareTasks(filename, extension) {

    ....


    siteNames.forEach(function(siteName) {

       var taskName = siteName + '-' + filename + '-' + extension;

       ....

       gulp.task(taskName, function() {
           setScssTasks(siteName, filename, paths);
       });
    });
}