Глоток: Как я могу построить filename.pug к filename/index.html

Question

Сейчас я пользуюсь глотком мопса

gulp.task('html', function(){
    return gulp.src(['src/**/*.pug', ...ignorePug])
        .pipe(pug())
        .pipe(gulp.dest('build'))
});

Как я могу построить свой HTML, чтобы имена файлов были именами папок.

Пример:

src/index.pug -> build/index.html
src/team.pug -> build/team/index.html
src/somepage.pug -> build/somepage/index.html

Answer 1

У меня было то же желание, и я написал функцию, которая использует gulp-rename для перезаписи путей к файлам по мере их обработки.

После запуска pug(), бежать rename() с этой функцией:

// custom pathbuilder function
const pathbuilder = (path) => {
    if ('index' !== path.basename) {
        path.dirname = path.basename.split('_').join('/')
        path.basename = 'index'
    }
}

gulp.task('html', function(){
    return gulp.src(['src/**/*.pug', ...ignorePug])
        .pipe( pug() )
        .pipe( rename((path) => { pathbuilder(path) }) )
        .pipe( gulp.dest('build') )
})

Он создан, чтобы делать то, что вы ищете. Кроме того, вы можете использовать подчеркивания, чтобы углубиться в каталогах.

src/index.pug          -> build/index.html
src/team.pug           -> build/team/index.html
src/team_alexander.pug -> build/team/alexander/index.html
src/somepage.pug       -> build/somepage/index.html

Обязательно установите и сначала запросите пакет переименования.