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

Question

我正在使用 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 上找到关于 Dave 的页面，http://example.com/about/dave/我会这样做：

我想实现这一点：

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

但是，结果是：

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

Answer 1

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

这是一个简单的例子：

哈巴狗来源：

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

编译命令：

pug source --out ./build

输出为：

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

Answer 2

这里有一个类似的问题：Jade to HTML > index.html inside directory 以玉文件命名，你会在其中找到一个很好的 gulp-rename 代码示例，它确实有效。