并行运行Gulp PostCSS与Webpack时的样式更新异常问题排查

核心原因确认 #

你的怀疑是正确的：Gulp 默认的 gulp.dest 行为是先删除目标文件、再写入新内容，短时间内的「删除+新建」事件会让 Webpack 依赖的文件监听工具（如 chokidar）出现事件丢失或误判——Webpack 可能只捕获到文件删除事件，后续的新建事件因为触发过快未被识别，最终导致样式丢失且不触发重载。

解决方案 #

1. 给输出的 CSS 文件触发 Touch 操作

通过强制更新文件的修改时间，确保 Webpack 能明确捕获到文件变化事件，避免因写入过快漏触发。

• 首先安装 gulp-touch-cmd 插件：

  npm install gulp-touch-cmd --save-dev
  

• 修改 gulpfile.js，在写入 CSS 后添加 touch 步骤：

  const gulp = require('gulp');
  const postcss = require('gulp-postcss');
  const autoprefixer = require('autoprefixer');
  const postcssNested = require('postcss-nested');
  const rename = require('gulp-rename');
  const touch = require('gulp-touch-cmd');
  
  gulp.task('compile-css', function() {
    return gulp.src('src/**/*.pcss')
      .pipe(postcss([autoprefixer, postcssNested]))
      .pipe(rename({ extname: '.css' }))
      .pipe(gulp.dest('src'))
      .pipe(touch()); // 强制更新文件修改时间
  });
  
  gulp.task('watch-css', function() {
    gulp.watch('src/**/*.pcss', gulp.series('compile-css'));
  });
  

2. 优化 Gulp Watch 的文件写入等待逻辑

调整 watch 选项，确保文件完全写入磁盘后再结束任务，避免 Webpack 读取到不完整的文件内容：

gulp.task('watch-css', function() {
  gulp.watch('src/**/*.pcss', {
    awaitWriteFinish: {
      stabilityThreshold: 500, // 等待500ms确认文件写入完成
      pollInterval: 100
    }
  }, gulp.series('compile-css'));
});

3. 临时文件中转替换（避免直接删除原文件）

通过先写入临时目录、再覆盖目标文件的方式，跳过「删除原文件」的步骤，让 Webpack 只捕获到文件修改事件：

• 修改 gulpfile.js：

  const fs = require('fs');
  const path = require('path');
  
  gulp.task('compile-css', function(done) {
    const tmpDir = '.tmp-css';
    
    // 先将转换后的CSS写入临时目录
    gulp.src('src/**/*.pcss')
      .pipe(postcss([autoprefixer, postcssNested]))
      .pipe(rename({ extname: '.css' }))
      .pipe(gulp.dest(tmpDir))
      .on('end', function() {
        // 遍历临时目录，覆盖到目标位置
        const components = fs.readdirSync(tmpDir);
        components.forEach(component => {
          const tmpCssPath = path.join(tmpDir, component, 'styles.css');
          const targetCssPath = path.join('src', component, 'styles.css');
          if (fs.existsSync(tmpCssPath)) {
            fs.copyFileSync(tmpCssPath, targetCssPath);
          }
        });
        // 删除临时目录
        fs.rmSync(tmpDir, { recursive: true, force: true });
        done();
      });
  });
  

4. 优化启动脚本（确保初始 CSS 生成完成再启动 Webpack）

在 package.json 中调整启动命令，用工具确保 Webpack 启动前所有 CSS 文件已生成，避免初始加载时样式缺失：

• 安装依赖：

  npm install concurrently wait-on --save-dev
  

• 修改 package.json 的 scripts：

  "scripts": {
    "dev": "concurrently \"npm run compile-css && npm run watch-css\" \"npm run wait-for-css && webpack serve\"",
    "compile-css": "gulp compile-css",
    "watch-css": "gulp watch-css",
    "wait-for-css": "wait-on src/**/styles.css"
  }
  

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