Gulp 4 - How to generate dynamic tasks based on two arrays

Question

I'm building an e-mail generation pipeline (multiple templates) using nunjucks and json translation files. This means I need to loop over the multiple templates and the translation files, however I can't seem to get it working.

Tried adding another loop inside the templates.map(), but that doesn't seem to be working (or I'm doing it completely wrong ofcourse). It almost works, but it crashes at some point, generating only a few of the templates. The first template works, but it crashes at the second template:

The following tasks did not complete: <anonymous>
Did you forget to signal async completion?

source: https://cobwwweb.com/dynamic-tasks-gulp-4

var templates = [];
var languages = ["nl", "en"];

function generateTemplates(done) {
  const tasks = templates.map((template) => {
    return () => {
      const langs = languages.map((lang) => {
        return () =>
          gulp.src(`source/templates/${template}`)
          .pipe(data(function () {
            return require(`./source/translations/${lang}/${template.split('.')[0] }.json`);
          }))
          .pipe(nunjucksRender({
            path: ['source/partials']
          }))
          .pipe(gulp.dest('dist/' + lang));
      });

      return gulp.series(...langs, (seriesDone) => {
        seriesDone();
      })();
    }
  });

  return gulp.series(...tasks, (seriesDone) => {
    seriesDone();
    done();
  })();
}

I also tried generating tasks using 2 for-loops, but this only generates the last template of the array of the last language in the array (example: only en/template2 will be generated correctly). I do see in the console that the tasks are starting and finishing, but I don't see them anywhere. Maybe the loop is finished mush faster than the generation of tasks? :

var templates = fs.readdirSync('./source/templates');
var languages = ["nl", "en"];

for (var lang of languages) {
  for (var template of templates) {
    gulp.task(`${lang}-${template}`, function (done) {
      return gulp.src(`source/templates/${template}`)
        .pipe(data(function () {
          return require(`./source/translations/${lang}/${template.split('.')[0]}.json`);
        }))
        .pipe(nunjucksRender({
          path: ['source/partials']
        }))
        .pipe(gulp.dest(`dist/${lang}`));
    });
    tasks.push(`${lang}-${template}`);
  }
}

gulp.task('genlang', gulp.series(tasks));

My folder structure:

/dist
/source
--/partials
--/templates
   --/template1.html
   --/template2.html
--/translations
   --/en
      --/template1.json
      --/template2.json
   --/nl
      --/template1.json
      --/template2.json

score 0 · Answer 1 · answered Jun 03 '19 at 14:12

Fixed it myself, I needed to have some done cb's in the returns:

function generateTemplates(done) {
  const tasks = templates.map((template) => {
    return (doneTasks) => {
      const langs = languages.map((lang) => {
        return (doneLanguages) => {
          gulp.src(`source/templates/${template}`)
          .pipe(data(() => require(`./source/translations/${lang}/${template.split('.')[0]}.json`)))
          .pipe(nunjucksRender({
            path: ['source/partials']
          }))
          .pipe(gulp.dest('./dist/' + lang));
          doneLanguages();
        }
      });

      return gulp.parallel(...langs, (seriesDone) => {
        seriesDone();
        doneTasks();
      })();
    };
  });

Gulp 4 - How to generate dynamic tasks based on two arrays

1 Answers1