Gulp 4 异常：修改旧样式正常，新增类/ID及@import内部代码不生效

我来帮你排查这个Gulp 4的棘手问题——这种“修改现有内容正常，新增内容无响应”的情况，通常和PostCSS插件行为、监听流程配置有关，咱们一步步拆解解决：

核心问题1：usedcss插件过滤了未在HTML中使用的新增选择器 #

你的PostCSS配置里启用了usedcss，它的作用是只保留HTML页面中实际用到的CSS选择器，用来精简生产环境的CSS体积。但在开发阶段，如果你新增的类/ID还没在HTML里引用，这个插件会自动把这些新增规则从编译后的CSS里删掉，看起来就像Gulp没检测到你的修改。

修复方案 #

开发阶段暂时禁用usedcss和cssnano（压缩插件也会增加调试难度），生产环境再开启：

postCSS: [
  // 仅生产环境启用usedcss
  devBuild ? null : require('usedcss')({ html: ['index.html'] }),
  require('postcss-assets')({ loadPaths: ['images/'], basePath: dir.build }),
  require('autoprefixer')({ browsers: ['> 1%'] }),
  // 仅生产环境启用cssnano压缩
  devBuild ? null : require('cssnano')
].filter(plugin => plugin !== null) // 自动过滤掉null的插件项

核心问题2：监听任务未关联完整的CSS编译流程 #

你的watch任务里原本直接调用css函数，但exports.css是包含images依赖的串联任务。虽然这不会影响SCSS编译，但如果新增样式依赖新图片，可能出现资源不同步的问题。同时确保监听路径覆盖所有SCSS文件：

修复方案 #

把监听回调改成调用exports.css，确保完整执行依赖任务：

function watch(done) { 
  // image changes
  gulp.watch(imgConfig.src, images);
  // CSS changes - 调用完整的css任务（包含images依赖）
  gulp.watch(cssConfig.watch, exports.css);
  done(); 
}

完整修改后的Gulp配置 #

整合所有修复后的完整代码：

(() => { 
  'use strict'; 
  const devBuild = ((process.env.NODE_ENV || 'development').trim().toLowerCase() === 'development'),
    dir = { 
      src: 'src/', 
      build: 'build/' 
    },
    gulp = require('gulp'),
    del = require('del'),
    noop = require('gulp-noop'),
    newer = require('gulp-newer'),
    size = require('gulp-size'),
    imagemin = require('gulp-imagemin'),
    sass = require('gulp-sass'), // 可替换为gulp-dart-sass
    postcss = require('gulp-postcss'),
    sourcemaps = devBuild ? require('gulp-sourcemaps') : null,
    browsersync = devBuild ? require('browser-sync').create() : null;

  console.log('Gulp', devBuild ? 'development' : 'production', 'build');

  function clean() { 
    return del([dir.build]); 
  }
  exports.clean = clean;
  exports.wipe = clean;

  const imgConfig = { 
    src: dir.src + 'images/**/*', 
    build: dir.build + 'images/', 
    minOpts: { optimizationLevel: 5 } 
  };
  function images() { 
    return gulp.src(imgConfig.src)
      .pipe(newer(imgConfig.build))
      .pipe(imagemin(imgConfig.minOpts))
      .pipe(size({ showFiles: true }))
      .pipe(gulp.dest(imgConfig.build)); 
  }
  exports.images = images;

  const cssConfig = { 
    src: dir.src + 'scss/main.scss', 
    watch: dir.src + 'scss/**/*', 
    build: dir.build + 'css/', 
    sassOpts: { 
      sourceMap: devBuild, 
      imagePath: '/images/', 
      precision: 3, 
      errLogToConsole: true 
    },
    postCSS: [
      devBuild ? null : require('usedcss')({ html: ['index.html'] }),
      require('postcss-assets')({ loadPaths: ['images/'], basePath: dir.build }),
      require('autoprefixer')({ browsers: ['> 1%'] }),
      devBuild ? null : require('cssnano')
    ].filter(plugin => plugin !== null)
  };

  function css() { 
    return gulp.src(cssConfig.src)
      .pipe(sourcemaps ? sourcemaps.init() : noop())
      .pipe(sass(cssConfig.sassOpts).on('error', sass.logError))
      .pipe(postcss(cssConfig.postCSS))
      .pipe(sourcemaps ? sourcemaps.write() : noop())
      .pipe(size({ showFiles: true }))
      .pipe(gulp.dest(cssConfig.build))
      .pipe(browsersync ? browsersync.reload({ stream: true }) : noop()); 
  }
  exports.css = gulp.series(images, css);

  const syncConfig = { 
    server: { baseDir: './', index: 'index.html' }, 
    port: 8000, 
    open: false 
  };
  function server(done) { 
    if (browsersync) browsersync.init(syncConfig); 
    done(); 
  }

  function watch(done) { 
    gulp.watch(imgConfig.src, images);
    gulp.watch(cssConfig.watch, exports.css);
    done(); 
  }

  exports.default = gulp.series(exports.css, watch, server);
})();

额外调试建议 #

1. 重启Gulp服务：有时候监听进程会因为文件系统变动出现异常，重启后即可恢复
2. 检查@import路径：新增的SCSS片段文件，确保@import的相对路径正确（比如@import './partials/new-styles';）
3. 强制刷新浏览器：如果编译正常但样式未更新，可能是浏览器缓存导致，按Ctrl+F5强制刷新

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