0

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?

lscmaro
  • 995
  • 8
  • 22

1 Answers1

0

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);
       });
    });
}
Community
  • 1
  • 1
sdeburca
  • 845
  • 9
  • 9
  • This works! I still don't fully understand how it could be a race condition though. From my understanding, the for loop over siteNames runs, sets individual tasks (ex: my-app-main-scss) with specific siteNames[site] (ex:my-app), then after all that runs the default build tasks which have already been set. I don't see how the siteNames[site] or taskName references inside the task setup are lost/overwritten. This read might also help me or someone https://github.com/gulpjs/gulp/issues/1581. but this works :) – lscmaro Aug 27 '16 at 02:11