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缓存时,编辑局部文件时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继承和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.
这是我的口渴文件
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依赖 + gulp-filter
what I use to solve this problem is gulp-cached + gulp-dependents + gulp-filter
这里的关键点是与gulp相关,它将找到所有依赖于当前文件的父文件.
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屋!