Gulp：仅在编辑导入的 SCSS 文件时编译更改的文件并编译父级答案

【问题标题】：Gulp: only compile changed files AND compile parents when imported SCSS file is editedGulp：仅在编辑导入的 SCSS 文件时编译更改的文件并编译父级
【发布时间】：2016-11-11 18:33:13
【问题描述】：

在工作中，我们曾经使用 Ruby 来编译 SCSS。我在 PhpStorm 中将 Ruby 编译器设置为文件观察器，当我编辑由另一个文件导入的部分时，与祖先文件相对应的 CSS 文件会毫不费力地更新。

我想让 Gulp 和 Libsass 以同样的方式工作。我见过的大多数解决方案只是在一个项目发生更改时编译项目中的所有 SCSS 文件，但我们的项目有太多的 SCSS 文件，这不是一个可接受的解决方案。

gulp-cached 似乎是解决这个问题的好方法。但是当我使用 gulp-cached 时，CSS 输出文件在我编辑部分文件时不会改变，只有它们的祖先 SCSS 文件。

我已经看到了一些 SCSS 依赖图解决方案，但我无法让它们正常工作，或者它们根本无法满足我的需求。我已经尝试过 gulp-sass-graph、gulp-sass-inheritance 和 gulp-sass-partials-imported。

这是我的 gulp 文件

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

const sassGlobs = [
  './sites/all/libraries/gl/**/*.scss',
  './sites/all/modules/custom/**/*.scss',
  './sites/all/themes/{bcp_bootstrap3,gl_parent,gl_shiny,gli_bootstrap3,pru_bootstrap3,pru_bootstrap3v2,ubc_bootstrap3}/**/*.scss',
];

let sassPaths = [];

for (let j = 0; j < sassGlobs.length; ++j) {
  glob(sassGlobs[j], function (er, files) {
    let path;
    for (let i = 0; i < files.length; ++i) {
      path = files[i].substring(0, files[i].lastIndexOf('/'), '');

      if (sassPaths.indexOf(path) === -1) {
        sassPaths.push(path);
      }
    }
  });
}

gulp.task('sass', function () {
  return gulp
    .src(sassGlobs, {base: "./"})
    // .pipe(sassGraph(sassPaths))
    .pipe(cached('sasscache'))
    .pipe(sourcemaps.init())
    .pipe(
      sass({outputStyle: 'compressed'})
        .on('error', sass.logError)
    )
    .pipe(sourcemaps.write())
    .pipe(gulp.dest((file) => file.base));
});

gulp.task('watch', function () {
  return gulp.watch(sassGlobs, ['sass']);
});

gulp.task('default', ['sass', 'watch']);

【问题讨论】：

很确定sassPaths 在您使用时仍然为空，因为glob 是异步的。
我测试并正确填充了 sassPaths。

标签： gulp gulp-sass

【解决方案1】：

我用来解决这个问题的是gulp-cached + gulp-dependents + gulp-filter

这里的重点是gulp-dependents，它会找到所有依赖于当前文件的父文件。

在你的情况下，你只需要：

const cached = require('gulp-cached');
const dependents = require('gulp-dependents');
const filter = require('gulp-filter');

const f = filter(['**', '!*src/partial']); //adjust this filter to filter the file you want to compile(pass to the sourcemap init method)

gulp.task('sass', function () {
  return gulp
    .src(PATH_TO_ALL_SASS_FILES, {base: "./"})
    .pipe(cached('sasscache'))
    .pipe(dependents())// this will find all parents of current changed files
    .pipe(f) //exclude the partial files,get the files you want to compile
    .pipe(sourcemaps.init())
    .pipe(
      sass({outputStyle: 'compressed'})
        .on('error', sass.logError)
    )
    .pipe(sourcemaps.write())
    .pipe(gulp.dest((file) => file.base)); // you might need to adjust the base path here, depend on your folder structure.
});

【讨论】：