使用SASS与Gulp监听WordPress主题PHP文件失效求助

数据老陈

2026-6-26

问题排查与解决方案

你的Gulp配置失效主要是watch函数的路径数组语法错误，同时可以优化purgecss的路径写法，具体问题和修正如下：

核心错误点

watch函数的参数数组里，你把SCSS和PHP的路径写到了同一个字符串里，还多了不必要的单引号：

watch(["kraftdeck-framework/**/*.scss, '**/**/*.php"], buildKraftdeckStyles);

这种写法会让Gulp把整个字符串当成一个路径去解析，自然无法识别PHP文件的监听规则。

修正步骤

拆分watch的路径数组：把SCSS和PHP路径拆成数组的两个独立元素，去掉多余的单引号：
```
watch(["kraftdeck-framework/**/*.scss", "**/*.php"], buildKraftdeckStyles);
```
优化purgecss的content路径：**/**/*.php等价于**/*.php，后者更简洁，同样能匹配根目录及所有子目录下的PHP文件：
```
.pipe(purgecss({ content: ["**/*.php"] }))
```

修正后的完整代码

const { src, dest, watch, series } = require("gulp");
const sass = require("gulp-sass")(require("sass"));
const purgecss = require("gulp-purgecss");

function buildKraftdeckStyles() {
  return src("kraftdeck-framework/**/*.scss")
    .pipe(sass())
    .pipe(purgecss({ content: ["**/*.php"] }))
    .pipe(dest("css"));
}

function watchKraftdeck() {
  watch(["kraftdeck-framework/**/*.scss", "**/*.php"], buildKraftdeckStyles);
}

exports.default = series(buildKraftdeckStyles, watchKraftdeck);