在源数组上使用 Gulp Newer

Question

我正在尝试通过优化 scss 编译任务来加速我的监视任务。 最初，我将所有的 scss 编译成一个大的 app.css 文件，但我发现，如果我删除一些很少更改的 @import（即基础样式），它会将我的编译时间减少一半，所以我移动了所有这些导入到一个单独的 global.scss 文件中。

我的问题是如何修改我的 gulp 文件，以便它仅在检测到这些 @import 之一发生更改时重新编译我的 global.scss 文件。然后，如果检测到 app.scss 中我的 @import 之一发生更改，它只会重新编译该文件？

我尝试使用gulp-newer，就像在这个SO问题中看到的那样：仅在使用gulp更改文件时才编译sass

但是当我从 app.scss 更改 @import 文件时，它也会重新编译我的 global.scss 文件

我也尝试过 gulp-cached 和 gulp-changed，但到目前为止没有运气。

文件组织

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

Gulp 文件：

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 }));
}

Answer 1

我能够使用 gulp 增量构建 和 gulp-dependents

找到解决方案

这里有一个很好的解释：NPM Gulp > 检索 SCSS 导入文件路径

我必须将 src() 从查看父级 scss 文件修改为查看所有 scss 文件。我的样式任务现在在 6 秒内完成（与原来的 20 多秒相比）

更新功能

import dependents    from 'gulp-dependents';
function styles() {
    return gulp.src('src/assets/scss/**/*.scss', { since: gulp.lastRun(styles) })
    .pipe(dependents())
    .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 }));
}