如何使用 gulp 编译文件并保持相同的文件夹结构？答案

【问题标题】：How to compile the file and keeping same folder structure using gulp?如何使用 gulp 编译文件并保持相同的文件夹结构？
【发布时间】：2018-05-01 09:13:49
【问题描述】：

我想编译所有的 pug 文件。

这是我的 src 文件夹结构

src
  pug
    a
      a.pug
    b
      b.pug

我希望 gulp 编译所有 pug 文件，但在 dest 文件夹中保持文件夹结构相同。

这应该是dest文件夹结构

dest
  a
    a.html
  b
    b.html

我曾尝试使用此代码，但它不起作用，它将所有 HTML 文件发送到的位置：dest/src/pug。

function getFolders(dir) {
  return fs.readdirSync(dir).filter(function(file) {
    return fs.statSync(path.join(dir, file)).isDirectory();
  });
}

var pugPath = "src/pug";

gulp.task("html", function() {
  var folders = getFolders(pugPath);
  var tasks = folders.map(function(folder) {
    return gulp
      .src([
        path.join(pugPath, folder, "src/pug/**/*.pug"),
        "!" + pugPath + "/includes/**/*.pug"
      ])
      .pipe(pug())
      .pipe(gulp.dest(paths.dest.html));
  });

  var root = gulp
    .src(path.join(pugPath, "src/pug/**/*.pug"))
    .pipe(pug())
    .pipe(gulp.dest(paths.dest.html));

  return merge(tasks, root);
});

【问题讨论】：

标签： gulp

【解决方案1】：

如果您使用像 src/pug/**/*.pug 这样的 glob 递归地抓取文件夹中的所有文件，然后通过管道传输到 dest('test')，似乎大部分代码都可能被丢弃。您合并文件夹的方式很可能是错误所在。

gulp.task("html", function() {
  return gulp.src([ 'src/pug/**/*.pug', '!src/pug/includes/**/*.pug' ])
    .pipe(pug())
    .pipe(gulp.dest('test'));
});

【讨论】：