Gulp: 如何将多个 .pug 文件编译成文件夹内的几个 index.html 文件

Question

我正在学习使用 gulp，我决定使用 pug 来编写我所有的 html。

问题是具有以下文件夹结构：

src/pug
├── base
│   ├── mixins.pug
│   └── variables.pug
├── components
│   ├── footer.pug
│   ├── header.pug
│   ├── head.pug
│   └── template.pug
├── index.pug
└── views
    └── about.pug

而且我希望 gulp 忽略所有不属于 index.html 的文件以及我在 views 文件夹中的所有文件。

我正在使用此配置执行此操作：

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/'));
};

事情是这样创建和输出的 dist/views/about.html。

但我宁愿生成这样的东西 dist/about/index.html。这样我就可以在多个页面之间导航，而无需在末尾添加 .html 扩展名的路由。

这可能吗？

Answer 1

我已经编写了一个执行此操作的 npm 模块：gulp-url-builder。

首先，将 index.pug 移动到 views 目录中。您要呈现为页面的所有内容都应该放在那里。不要忘记调整模板的任何 extends 路径。

src/pug
├── base
│   ├── mixins.pug
│   └── variables.pug
├── components
│   ├── footer.pug
│   ├── header.pug
│   ├── head.pug
│   └── template.pug
└── views
    ├── about.pug
    └── index.pug

在 gulpfile 中安装所需的 url 构建器模块后，您可以将 compilePug() 函数修改为如下所示：

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') )
}

这将根据此模式输出 html 个文件（注意下划线可用于嵌套页面）：

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

Gulp: 如何将多个 .pug 文件编译成文件夹内的几个 index.html 文件

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

gulp

pug