gulp rename multiple files

Question

I have a gulp script to manipulate a master html file and rename it into several name based on an array. here's the script.

    gulp.task('default', function () {
      var data = ['name1','name2'];
      for(var name in data){              
         gulp.src('src/master.html')
           .pipe(*dosomething...*)
           .pipe(rename(function(path) {
              path.basename = name;
              path.extname = '.html';
          }))
         .pipe(gulp.dest('dist'));
      }
    });

But only the name2.html is generated. Can anyone tell me what's wrong with my code.

Answer 1

Don't make functions within a loop.

Your loop creates multiple functions that you pass to rename. Each of those functions refers to the same variable name. However those functions aren't executed immediately, but only after all of them have been created. That means all your functions refer to the last value that name had in the loop.

You need to create multiple name variables by replacing your for loop with a looping construct that creates a new function scope for each value, e.g. Array.forEach.

You are also creating multiple streams in your loop. You should return those streams after merging them with merge-stream so gulp can determine when your task has finished.

var gulp = require('gulp');
var rename = require('gulp-rename');
var merge = require('merge-stream');

gulp.task('default', function () {
  var data = ['name1','name2'];
  var streams = [];
  data.forEach(function(name) {
    var stream = gulp.src('src/master.html')
      .pipe(rename(function(path) {
        path.basename = name;
        path.extname = '.html';
      }))
      .pipe(gulp.dest('dist'));
    streams.push(stream);
  });
  return merge(streams);
});