html - Gulp：如何将 filename.pug 构建为 filename/index.html

Question

现在我正在使用 gulp-pug

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

更新

我在这里发布了一个 npm 包和 gulp 插件来解决这个确切的问题：https ://www.npmjs.com/package/gulp-url-builder

---

原始答案

我有同样的愿望，并编写了一个函数，该函数使用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

请务必先安装并要求重命名包。