将 Jade 编译为 HTML，同时保持文件夹结构答案

【问题标题】：Compile Jade to HTML while keeping folder structure将 Jade 编译为 HTML，同时保持文件夹结构
【发布时间】：2015-11-16 16:57:42
【问题描述】：

我正在使用 Gulp、Gulp Jade 和 Gulp Rename 来创建一个带有规范 URL 的静态站点。

目前这个脚本：

gulp.task('jade', function() {
  return gulp.src('src/views/**/*.jade')
    .pipe(jade({
      pretty: true
    }))
    .pipe(rename(function(path){
        if (path.basename=='index'){
          return;
        }
        path.dirname=path.basename.split('-').join('/');
        path.basename="index";
    }))
    .pipe(gulp.dest('./public/'))
    callback();
});

允许我编译以下文件：

/src/views/index.jade >> /public/index.html（首页）

/src/views/about.jade >> /public/about/index.html（关于页面）

这意味着我可以在 http://example.com/（对于 index.jade）和 http://example.com/about/（对于 about.jade）拥有规范的 URL。

但是，我希望能够在 URL 结构中拥有超过 1 个级别。例如，如果我想在 URL http://example.com/about/dave/ 上找到关于 Dave 的页面，我会这样做：

我想实现这个：

/src/views/about/dave.jade >> /public/about/dave/index.html

但是，结果是：

/src/views/about/dave.jade >> /public/dave/index.html

【问题讨论】：

标签： javascript node.js gulp pug gulp-rename

【解决方案1】：

这里有一个类似的问题：Jade to HTML > index.html inside directory named after jade file 在那里你会找到一个很好的 gulp-rename 代码示例，它确实有效。

【讨论】：

【解决方案2】：

Jade 已重命名为“Pug”，现在在将目录作为编译输入时默认保留目录结构。

这是一个简单的例子：

帕格来源：

source/
    templates/
      |-- index.pug
      |-- about.pug
    partials/
      |-- navigation.pug

编译命令：

pug source --out ./build

输出为：

build/
    templates/
      |-- index.html
      |-- about.html
    partials/
      |-- navigation.html

【讨论】：