Gulp: How to compile multiple .pug files into several index.html files inside folders - gulp

Question

I'm learning to use gulp and I decided to use pug for writing all my html.
The thing is that have this folder structure:
src/pug
├── base
│   ├── mixins.pug
│   └── variables.pug
├── components
│   ├── footer.pug
│   ├── header.pug
│   ├── head.pug
│   └── template.pug
├── index.pug
└── views
└── about.pug
And I want gulp to ignore all files that are not index.html and all my files inside the views folder.
I'm doing that using this configuration:
function compilePug() {
return src(['./src/pug/index.pug','./src/pug/views/*.pug'], {base: './src/pug/'})
.pipe(pug().on("error", console.log))
.pipe(
pug({
// Your options in here.
})
)
.pipe(dest('./dist/'));
};
The thing is, that's creating and output like this dist/views/about.html.
But I rather generate something like this dist/about/index.html.That way I can navigate between multiple pages without having a route with the .html extension at the end.
Is that possible?

Answer 1

I've written an npm module that does this: gulp-url-builder.
First, move your index.pug into your views directory. Everything you want to render as a page should go in there. Don't forget to adjust any extends path to your template.
src/pug
├── base
│ ├── mixins.pug
│ └── variables.pug
├── components
│ ├── footer.pug
│ ├── header.pug
│ ├── head.pug
│ └── template.pug
└── views
├── about.pug
└── index.pug
After you've installed in required the url builder module in your gulpfile, you can modify your compilePug() function to look something like this:
const { src, dest, series, parallel, watch } = require('gulp')
const pug = require('gulp-pug')
const urlBuilder = require('gulp-url-builder')
function compilePug() {
return src([
'./src/pug/views/*.pug'
]).pipe( pug() )
.pipe( urlBuilder() )
.pipe( dest('dist') )
}
This will output html files based on this pattern (note that underscores can be used for nested pages):
src/pug/views/index.pug --> dist/index.html
src/pug/views/about.pug --> dist/about/index.html
src/pug/views/foo-bar.pug --> dist/foo-bar/index.html
src/pug/views/blog.pug --> dist/blog/index.html
src/pug/views/blog_my-post.pug --> dist/blog/my-post/index.html