Gulp, Pug - How do I compile all .pug files in subdirectories of src/ directory to /dist so they maintain the directory hierarchy?

Question

I have my src/ directory as follows:

src/
---about/
------history.pug
------mission.pug
---contact/
------email.pug
---index.pug

I want my .pug files to be compiled in such a way that they maintain this directory hierarchy even in the dist/ directory. Something like:

dist/
---about/
------history.html
------mission.html
---contact/
------email.html
---index.html

I'm using Gulp to process the pug files. Can this be achieved with one task using gulp, or otherwise? Thanks!

The Gulp task for handling my pug files:

gulp.task('pug', function() {
    return gulp.src('src/pug/*.pug')
    .pipe(pug({
        basedir: "./"
    }))
    .pipe(gulp.dest('dist/html'));
})

Answer 1

gulp.task('pug', function() {
  return gulp.src('src/**/*.pug')
   .pipe(pug())
   .pipe(gulp.dest('dist'));
})

will get your pug files and put them where I think you want. In your code you have

.pipe(gulp.dest('dist/html')); 

but there is no html folder in your desired dist folder structure. Same comment as to

gulp.src('src/pug/*.pug')

Your src directory does not have a pug subfolder, so why is src/pug here?

Also I don't think {basedir:....} is an option to the pug plugin so I removed it.