如何配置Gulp实现SCSS按需编译，避免无关文件重复编译？

我正尝试通过优化SCSS编译任务来加快watch任务的执行速度。原本我将所有SCSS编译为一个较大的app.css文件，后来发现如果移除那些很少变更的@import（如Foundation样式），编译时间可缩短一半，因此我将这些导入内容移至单独的global.scss文件中。

我的问题是：如何修改Gulpfile，使得只有当global.scss的某个@import文件发生变更时，才重新编译global.scss；而当app.scss的某个@import文件发生变更时，仅重新编译app.scss？

我尝试过使用gulp-newer、gulp-cached和gulp-changed，但均未解决问题——修改app.scss的@import文件时，global.scss也会被重新编译。

文件结构 #

/src/assets
  /scss
    /app.scss
    /global.scss
/dist/assets
  /css
    /app.css
    /global.css

原Gulpfile代码 #

function styles() {
  return gulp.src(['src/assets/scss/app.scss', 'src/assets/scss/global.scss'])
    .pipe(newer('dist/assets/css'))
    .pipe($.sourcemaps.init())
    .pipe(sass({ includePaths: PATHS.sass })
      .on('error', sass.logError))
    .pipe($.autoprefixer({
      overrideBrowserslist: COMPATIBILITY
    }))
    .pipe($.if(PRODUCTION, $.cleanCss({ compatibility: 'ie9' })))
    .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
    .pipe(gulp.dest('dist/assets/css'))
    .pipe(browser.reload({ stream: true }));
}

解决方案：拆分任务+精准监听依赖 #

核心思路是将app和global的编译拆分为两个独立任务，并为每个任务配置精准的依赖文件监听，确保只有对应文件变更时才触发编译。

步骤1：拆分编译任务 #

分别创建stylesApp和stylesGlobal两个独立任务，各自处理对应的SCSS入口文件：

function stylesApp() {
  return gulp.src('src/assets/scss/app.scss')
    .pipe($.sourcemaps.init())
    .pipe(sass({ includePaths: PATHS.sass })
      .on('error', sass.logError))
    .pipe($.autoprefixer({
      overrideBrowserslist: COMPATIBILITY
    }))
    .pipe($.if(PRODUCTION, $.cleanCss({ compatibility: 'ie9' })))
    .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
    .pipe(gulp.dest('dist/assets/css'))
    .pipe(browser.reload({ stream: true }));
}

function stylesGlobal() {
  return gulp.src('src/assets/scss/global.scss')
    .pipe($.sourcemaps.init())
    .pipe(sass({ includePaths: PATHS.sass })
      .on('error', sass.logError))
    .pipe($.autoprefixer({
      overrideBrowserslist: COMPATIBILITY
    }))
    .pipe($.if(PRODUCTION, $.cleanCss({ compatibility: 'ie9' })))
    .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
    .pipe(gulp.dest('dist/assets/css'))
    .pipe(browser.reload({ stream: true }));
}

步骤2：配置精准的watch监听 #

为每个任务指定对应的监听文件——不仅要监听入口文件，还要监听其@import引入的所有依赖文件。如果依赖有固定目录，可直接监听对应路径：

function watchFiles() {
  // 监听app.scss及其专属依赖
  gulp.watch([
    'src/assets/scss/app.scss',
    'src/assets/scss/app/**/*.scss' // 假设app的依赖都在app子目录
  ], stylesApp);

  // 监听global.scss及其专属依赖
  gulp.watch([
    'src/assets/scss/global.scss',
    'src/assets/scss/global/**/*.scss', // 假设global的依赖都在global子目录
    'src/assets/scss/vendor/**/*.scss' // 第三方依赖如Foundation
  ], stylesGlobal);
}

// 导出默认任务
exports.default = gulp.series(stylesApp, stylesGlobal, watchFiles);

步骤3：可选：自动追踪SCSS依赖（无固定目录时） #

如果依赖文件没有固定目录，可使用gulp-sass-graph自动分析依赖树：

1. 安装依赖：

npm install gulp-sass-graph --save-dev

2. 修改watch任务：

const sassGraph = require('gulp-sass-graph');

function watchFiles() {
  // 自动分析app.scss的依赖树并监听
  const appGraph = sassGraph.parse('src/assets/scss/app.scss', { loadPaths: PATHS.sass });
  gulp.watch(Object.keys(appGraph.index), stylesApp);

  // 自动分析global.scss的依赖树并监听
  const globalGraph = sassGraph.parse('src/assets/scss/global.scss', { loadPaths: PATHS.sass });
  gulp.watch(Object.keys(globalGraph.index), stylesGlobal);
}

原方法失效原因 #

• gulp-newer仅对比入口文件和输出文件的修改时间，无法追踪@import的依赖变更；
• gulp-cached默认只缓存入口文件，感知不到依赖文件的变化；
• 原任务同时处理两个入口文件，任何一个依赖变更都会触发整个任务执行，导致两个文件被重复编译。

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