creating tasks using a loop [gulp]

Question

I'm trying to dynamically create tasks (minify and concat) based on jsFiles object. The key will give the destination file name and the array contains the src files. When I run gulp I see all the tasks names being ran but it only writes the last key which is group2.js in this case. What's wrong here?

// imports here  var jsFiles =  {     group1:[file1.js,file2.js],     group2:[file2.js,file3.js] };  for (var key in jsFiles) {     gulp.task(key, function() {         return gulp.src(jsFiles[key])         .pipe(jshint())         .pipe(uglify())         .pipe(concat(key + '.js'))  // <- HERE         .pipe(gulp.dest('public/js'));     }); }  var defaultTasks = []; for (var key in jsFiles) {     defaultTasks.push(key); } gulp.task('default', defaultTasks); 

Answer 1

Another option is to use functional array looping functions combined with Object.keys, like so:

var defaultTasks = Object.keys(jsFiles);  defaultTasks.forEach(function(taskName) {    gulp.task(taskName, function() {        return gulp.src(jsFiles[taskName])           .pipe(jshint())           .pipe(uglify())           .pipe(concat(key + '.js'))           .pipe(gulp.dest('public/js'));    }); }); 

I feel like this is a little cleaner, because you have the loop and the function in the same place, so it's easier to maintain.

Answer 2

Capture the value of 'key' variable on each iteration using IIFE. In your example, at the moment of concat invocation loop will be finished already and variable key will have the last value.

for (var key in jsFiles) {     (function(key) {         gulp.task(key, function() {             return gulp.src(jsFiles[key])                 .pipe(jshint())                 .pipe(uglify())                 .pipe(concat(key + '.js'))  // <- HERE                 .pipe(gulp.dest('public/js'));         });      })(key);  } 

For detailed explanation see this function closures - Avoiding the Reference Problem section