Gulp：如何将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

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