分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了Gulp：如何将多个 .pug 文件编译成文件夹内的多个 index.html 文件，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决Gulp：如何将多个 .pug 文件编译成文件夹内的多个 index.html 文件？

开发过程中遇到Gulp：如何将多个 .pug 文件编译成文件夹内的多个 index.html 文件的问题如何解决？下面主要结合日常开发的经验，给出你关于Gulp：如何将多个 .pug 文件编译成文件夹内的多个 index.html 文件的解决方法建议，希望对你解决Gulp：如何将多个 .pug 文件编译成文件夹内的多个 index.html 文件有所启发或帮助；

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

事情是有这个文件夹结构：

@H_673_3@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 文件夹中的所有文件。

我正在使用此配置：

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

问题是，这就是像 @H_673_3@dist/vIEws/about.HTML 这样的创建和输出。

但我更愿意生成类似 @H_673_3@dist/about/index.HTML 的内容。这样我就可以在多个页面之间导航，而无需在末尾带有 @H_673_3@.HTML 扩展名的路由。

这可能吗？

解决方法

我编写了一个 npm 模块来执行此操作：@H_673_3@gulp-url-builder。

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

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

在您的 gulpfile 中安装所需的 url 构建器模块后，您可以修改您的 @H_673_3@compilePug() 函数，使其看起来像这样：

@H_673_3@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文件（注意下划线可用于嵌套页面）：

@H_673_3@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