使用gulp-pug与gulp-plumber时，Gulp无法识别管道中子文件夹

你的问题源于两处：未定义的__reload()函数导致任务异常，以及未显式指定文件输出的基础路径，使得子目录下的Pug文件无法生成对应结构的HTML。

修复步骤 #

1. 移除未存在的函数调用 #

views任务中调用的__reload()未定义，即便gulp-plumber捕获了错误，也可能干扰子目录文件的处理流程，先移除该行：

function views() {
  return (
    src('src/pug/pages/**/*.pug', { base: 'src/pug/pages' }) // 新增base参数
    .pipe(plumber())
    .pipe(pug({
        pretty: true
    }))
    .pipe(dest('./'))
    // 移除__reload()，若需自动刷新需先引入browser-sync并定义对应函数
  )
}

2. 显式指定文件基础路径 #

在src方法中添加{ base: 'src/pug/pages' }参数，Gulp会保留原文件相对于src/pug/pages的目录结构，子目录下的Pug文件就能生成对应路径的HTML（比如projects/project.pug会输出为projects/project.html）。

3. 修复未定义的watch相关函数 #

你的watch任务使用了watchTask和reload但未定义，会导致执行gulp命令报错。若不需要自动刷新，可简化watch任务：

function watchTask() {
  __watch('src/pug/**/*.pug', views);
}

const watch = series(watchTask); // 移除未定义的reload
const build = series(parallel(views)); // 移除未定义的styles、scripts、html

完整修复后的gulpfile.js #

import gulp from 'gulp';
const { src, dest, watch: __watch, parallel, series } = gulp;
import pug from 'gulp-pug';
import plumber from 'gulp-plumber';

function views() {
  return (
    src('src/pug/pages/**/*.pug', { base: 'src/pug/pages' })
    .pipe(plumber())
    .pipe(pug({
        pretty: true
    }))
    .pipe(dest('./'))
  )
}

function watchTask() {
  __watch('src/pug/**/*.pug', views);
}

const watch = series(watchTask);
const build = series(parallel(views));

const _build = build;
export { _build as build };
const _default = watch;
export { _default as default };

现在执行gulp build或gulp命令，就能生成index.html、contact.html以及projects/project.html文件了。

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