如何使用Gulp编译Pug文件并保持原目录结构？

我来帮你搞定这个Gulp编译Pug的路径问题！你遇到的核心问题是输出路径没有正确剥离src/pug这个基准目录，导致所有文件都嵌套到了dest/src/pug下面。下面是具体的解决方案：

核心思路 #

我们需要利用Gulp的base参数来指定文件读取的基准目录，这样输出时会自动保留基准目录之后的路径结构，完美映射你想要的src/pug/a/a.pug → dest/a/a.html的对应关系。

完整代码实现 #

首先确保你已经安装了必要的依赖：gulp、gulp-pug（path、fs是Node.js内置模块，无需额外安装）。

const gulp = require('gulp');
const pug = require('gulp-pug');
const path = require('path');
const fs = require('fs');

// 获取src/pug下的所有子目录（对应你的a、b文件夹）
function getFolders(dir) {
  return fs.readdirSync(dir).filter(file => {
    return fs.statSync(path.join(dir, file)).isDirectory();
  });
}

// 编译Pug文件的任务（两种写法任选其一）
// 写法一：遍历子目录单独处理（适合需要针对不同目录做差异化配置的场景）
function compilePug() {
  const folders = getFolders('src/pug');
  
  // 为每个文件夹创建编译任务
  const tasks = folders.map(folder => {
    return gulp.src(`src/pug/${folder}/**/*.pug`, { base: 'src/pug' })
      .pipe(pug({ pretty: true })) // pretty: true 让输出的HTML格式化，可读性更强
      .pipe(gulp.dest('dest'));
  });
  
  return Promise.all(tasks);
}

// 写法二：简洁版，直接匹配所有Pug文件（如果不需要差异化配置，推荐这个）
// function compilePug() {
//   return gulp.src('src/pug/**/*.pug', { base: 'src/pug' })
//     .pipe(pug({ pretty: true }))
//     .pipe(gulp.dest('dest'));
// }

// 注册默认任务
exports.default = compilePug;

代码解释 #

• base: 'src/pug'：这是关键！它告诉Gulp，读取文件时以src/pug作为基准路径。比如src/pug/a/a.pug相对于基准路径的部分是a/a.pug，所以输出到dest时就会变成dest/a/a.html，完美保留了你想要的目录结构。
• gulp.dest('dest')：直接指定输出根目录即可，Gulp会根据base参数自动拼接后续路径。
• pretty: true：可选参数，用于格式化输出的HTML代码，方便调试和阅读，不需要的话可以去掉。

为什么你之前的代码无效？ #

大概率是你没有设置base参数，或者在处理输出路径时错误地把完整的src/pug路径拼接了进去，导致最终生成的文件路径变成了dest/src/pug/...，而不是你期望的dest/a/...、dest/b/...。

内容的提问来源于stack exchange，提问作者Yashu Mittal