Why are my Gulp build tasks not being set correctly?

Question

I seem to be having an issue with how tasks are being stored in my variables or something. I'm creating tasks dynamically based on how many css files, js files, and sites there are in my given build. These are the arrays im dealing with:

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

So, I'm trying to create a main.css and relevant .js files for each siteNames.

//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");
}

These run:

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);
}

};

After these run, the gulp default tasks are set:

gulp.task('default', buildTasks);

so when the task runs for 'my-app-main-scss', the console.log reads the incorrect taskName inside the task and the incorrect siteName[site]. It's set to the last item in the arrays. Here is a jsfiddle of my whole code: https://jsfiddle.net/zrcbzp99/ How are these tasks not being set correctly?

Answer 1

I think the answers here will help you:

creating tasks using a loop [gulp]

Your For loop over siteNames will have already completed / reached the last siteName by the time the functionality of your gulp task is invoked / called.

Try something like this :

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);
       });
    });
}