如何使用Gulp4生成的bundle.css？gulp-extract-css报错如何解决

bundle.css 的基础使用 #

• 常规开发/生产场景下完全不需要提取独立CSS文件，直接在HTML页面中通过<link>标签引入打包生成的bundle.css即可使用所有合并后的样式。你配置生成的sourceMap仅用于开发阶段定位样式源文件，不会影响样式正常加载。
• 只有当你需要按业务场景拆分独立样式包（比如单独输出IE兼容样式、子主题专属样式）时，才需要做CSS提取操作。

gulp-extract-css 报错原因 #

你遇到的ERR_INVALID_CALLBACK错误和你的配置写法无关：该插件已经多年没有维护，内部调用Node.js原生fs.writeFile方法时使用了已被废弃的无回调旧版API，和新版Node.js运行环境不兼容，不建议继续使用。

额外注意：你原来的extractCSS任务没有返回Gulp流，Gulp4无法感知任务执行状态，就算插件本身没有兼容问题，也可能出现任务执行不完全、输出文件缺失的问题。同时你原来的Sass打包任务顺序有误：concat合并操作放在sourceMaps.write之后，会导致生成的sourceMap映射完全错乱。

推荐的CSS拆分实现（Gulp4原生兼容方案） #

不需要依赖无人维护的第三方提取插件，用常规Gulp生态工具即可实现按选择器前缀拆分CSS：

1. 安装所需依赖

npm install gulp-filter --save-dev

2. 修正原有Sass打包任务顺序

const bundleSass = () => {
  return src('./src/scss/**/*.scss')
    .pipe(sourceMaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(concat('bundle.css')) // 先合并文件，再做压缩和sourceMap生成
    .pipe(minifyCss())
    .pipe(sourceMaps.write('.')) // 独立生成.map文件，避免CSS文件体积冗余
    .pipe(dest('./dist/static/css'))
}

3. 编写可正常运行的CSS拆分任务

const filter = require('gulp-filter');
const path = require('path');

const extractCSS = () => {
  // 匹配提取.ie9前缀的样式
  const ie9StyleFilter = filter(file => path.extname(file.path) === '.css', {
    transform: content => content.toString().match(/\.ie9[^{]*\{[^}]*\}/g)?.join('\n') || ''
  });
  // 匹配提取.somesubtheme前缀的样式
  const subthemeStyleFilter = filter(file => path.extname(file.path) === '.css', {
    transform: content => content.toString().match(/\.somesubtheme[^{]*\{[^}]*\}/g)?.join('\n') || ''
  });

  return src('dist/static/css/**/bundle.css')
    // 输出IE兼容样式
    .pipe(ie9StyleFilter)
    .pipe(concat('outdated.css'))
    .pipe(dest('./dist/static/css'))
    .pipe(ie9StyleFilter.restore)
    // 输出子主题样式
    .pipe(subthemeStyleFilter)
    .pipe(concat('somesubtheme.css'))
    .pipe(dest('./dist/static/css'))
    .pipe(subthemeStyleFilter.restore);
}

• 如果需要实现更复杂的CSS拆分逻辑（比如按媒体查询拆分、按选择器白名单/黑名单过滤），可以使用PostCSS生态下的相关插件，维护活跃度和兼容性远高于老旧的gulp-extract-css。
• 所有Gulp4任务必须返回对应的流/Promise/回调，否则任务调度会出现异常。

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