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

确保先安装并要求重命名包。

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

Gulp: How can I build filename.pug to filename/index.html

html

gulp

pug-loader

更新

原答案