Gulp:仅在编辑导入的 SCSS 文件时编译更改的文件并编译父级 [英] Gulp: only compile changed files AND compile parents when imported SCSS file is edited

问题描述

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

At work we used to use Ruby to compile SCSS. I had the Ruby compiler set up as a file watcher in PhpStorm, and when I edited a partial imported by another file, the CSS file corresponding to the ancestor file was updated without any fuss.

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

I want to get Gulp and Libsass to work the same way. Most solutions I've seen just compile all the SCSS files in a project when a single one changes, but our projects have way too much SCSS for that to be an acceptable solution.

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

gulp-cached seemed like a great solution to this problem. But when I use gulp-cached the CSS output file doesn't change when I edit partials, only their ancestor SCSS files.

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

I've seen a few SCSS dependency-graph solutions thrown around but I can't get them to work correctly or they simply don't do what I need. I've tried gulp-sass-graph, gulp-sass-inheritance, and gulp-sass-partials-imported.

这是我的 gulp 文件

Here's my gulp file

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']);

推荐答案

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

what I use to solve this problem is gulp-cached + gulp-dependents + gulp-filter

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

the key point here is gulp-dependents, it will find all the parent files that depends on the current file.

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

in your case, you just need:

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

这篇关于Gulp:仅在编辑导入的 SCSS 文件时编译更改的文件并编译父级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！