How to move globbed gulp.src files into a nested gulp.dest folder

Question

QUESTION PART 1: OUTPUTTING TO A NESTED DYNAMIC FOLDER

I use Gulp.js for graphic email development. My employer is switching to a different marketing platform which requires our email templates to be in a different folder structure. I'm having trouble outputting to nested folders when gulp.src uses globbing. I'd appreciate your help!

Here is a simplified example the gulp.src folder:

build/template1/template1.html
build/template2/template2.html
build/template3/template4.html
build/template4/template4.html

Here is a simplified example the gulp.src folder:

build/template1/theme/html/template1.html
build/template2/theme/html/template2.html
build/template3/theme/html/template4.html
build/template4/theme/html/template4.html

I want to do something like a wildcard for the dynamic template folders ...

gulp.task('moveFile', function(){
  return gulp.src('./build/*/*.html')
  .pipe(gulp.dest('./build/*/theme/html'));
});

... But globbing only works in the gulp.src. How can I output to a dynamic folder when using a globbed gulp.src? the closest I can get is putting the /theme folder at the same level as the template folders, not inside each as desired.

Thank you for your help!

QUESTION PART 2: OUTPUTTING A *RENAMED FILE* TO A NESTED DYNAMIC FOLDER

Mark's answered my question (Thanks @Mark!), but I over-simplified my use case so I'm adding a Part 2.

In addition to nesting the file, I need to rename it. (I had this part working originally, but can't get the 2 parts to work together.) Referring to the gulp-rename documentation, I made 3 different attempts. It's so close but I'd appreciate a little more help. :-)

// ATTEMPT 1: Using gulp-rename mutating function method
gulp.task('createTwig', function(){
  return gulp.src('./build/*/*.html')
    .pipe(rename(
      function (path) {
        path.basename = "email";
        path.extname = ".html.twig";
      },
      function (file) {
        console.log(file.dirname);
        file.dirname = nodePath.join(file.dirname, 'theme/html');
      }
    ))
    .pipe(gulp.dest('./build/'));
});

// ATTEMPT 2: Using gulp-rename fixed object method
gulp.task('createTwig', function(){
  return gulp.src('./build/*/*.html', { base: process.cwd() })
    .pipe(rename(
      {
        basename: "email",
        extname: ".html.twig"
      },
      function (file) {
        console.log(file.dirname);
        file.dirname = nodePath.join(file.dirname, 'theme/html');
      }
    ))
    .pipe(gulp.dest('./build/'));
});

// ATTEMPT 3: Using gulp-rename mutating function method
gulp.task('createTwig', function(){
  return gulp.src('./build/*/*.html')
    .pipe(rename(
      function (path, file) {
        path.basename = "email";
        path.extname = ".html.twig";
        console.log(file.dirname);
        file.dirname = nodePath.join(file.dirname, 'theme/html');
      }
    ))
    .pipe(gulp.dest('./build/'));
});

Answer 1

This works:

const rename = require("gulp-rename");
const path = require("path");


gulp.task('moveFile', function(){
  return gulp.src(['build/**/*.html'])

    .pipe(rename(function (file) {
      console.log(file.dirname);
      file.dirname = path.join(file.dirname, 'theme/html');
    }))

    .pipe(gulp.dest('build'))   // build/template1/theme/html
});

I tried a few ways, including trying the base option and gulp-flatten and using a function in gulp.dest but this was the easiest.

---

Question Part #2:

gulp.task('createTwig', function(){
  return gulp.src(['build/**/*.html'])

  .pipe(rename(function (file) {

    file.basename = "email";
    file.extname = ".html.twig";
  
    file.dirname = path.join(file.dirname, 'theme/html');
  }))

  .pipe(gulp.dest('build'))   // build/template1/theme/html
});

path.basename/extname are just "getters", you cannot set those values.