Gulp's Task in a loop?

Question

gulp.js

Please explain how to execute a task in a loop. Or is it possible to somehow debug the task with console.log.
Essence:

gulp.task('sprite', function() {
  var pages = [
    'index',
    'about',
    'members'
  ]
  for (var i = 0; i < pages.length; i++){
      var spriteData = 
          gulp.src('./img/sprite/before/'+pages[i]+'/') // путь, откуда берем картинки для спрайта
          .pipe(console.log(pages[i]))
          .pipe(spritesmith({
            imgName: 'sprite_'+pages[i]+'.png',
            cssName: 'sprite_'+pages[i]+'.styl',
            cssFormat: 'stylus',
            algorithm: 'binary-tree',
            padding: 1,
            cssTemplate: 'stylus.template.mustache',
            cssVarMap: function(sprite) {
              sprite.name = 's-' + sprite.name
            }
          }));
      spriteData.img.pipe(gulp.dest('./img/sprite/')); // путь, куда сохраняем картинку
      spriteData.css.pipe(gulp.dest('./stylus/')); // путь, куда сохраняем стили
      console.log(gulp.src);
  }
});

there is such a task, if you do without a loop and an array, everything works fine, it eats images from a folder and makes a sprite, but I need the task to eat images from different folders and make the corresponding sprites. With the introduction of a cycle and an array, the task seems to work (the terminal does not throw errors), but there is no effect. Please explain what is the problem, or how to organize it correctly. Thanks in advance.

Answer 1

You have an error in your code.
You probably meant to refer to the length here, but at the same time you created an object and get an undefined field.
If you want to work with pages as an array, create it as an array
var pages = ['index', 'about', 'members'];

Answer 2

./img/sprite/before/**/*.(png|jpg|jpeg)+so from all levels of subdirectories you will get png jpg jpeg