Gulp:编辑导入的SCSS文件时,仅编译更改的文件和编译父级
在工作中,我们使用Ruby来编译SCS。我在PhpStorm中将Ruby编译器设置为文件观察者,当我编辑由另一个文件导入的部分时,与祖先文件相对应的CSS文件被毫不费事地更新 我想让Gulp和Libsas以同样的方式工作。我见过的大多数解决方案只是在单个SCS文件发生更改时编译项目中的所有SCS文件,但我们的项目有太多的SCS,这不是一个可接受的解决方案 大口喝似乎是解决这个问题的好办法。但是当我使用gulp缓存时,CSS输出文件在我编辑部分时不会改变,只有它们的祖先SCSS文件 我见过一些SCSS依赖关系图解决方案,但我无法让它们正常工作,或者它们根本不能满足我的需要。我尝试过gulp sass graph、gulp sass继承和gulp sass partials导入 这是我的吞咽文件Gulp:编辑导入的SCSS文件时,仅编译更改的文件和编译父级,gulp,gulp-sass,Gulp,Gulp Sass,在工作中,我们使用Ruby来编译SCS。我在PhpStorm中将Ruby编译器设置为文件观察者,当我编辑由另一个文件导入的部分时,与祖先文件相对应的CSS文件被毫不费事地更新 我想让Gulp和Libsas以同样的方式工作。我见过的大多数解决方案只是在单个SCS文件发生更改时编译项目中的所有SCS文件,但我们的项目有太多的SCS,这不是一个可接受的解决方案 大口喝似乎是解决这个问题的好办法。但是当我使用gulp缓存时,CSS输出文件在我编辑部分时不会改变,只有它们的祖先SCSS文件 我见过一些SC
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']);
const gulp=require('gulp');
常量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_shinny,gli_bootstrap3,pru_bootstrap3,pru_bootstrap3v2,ubc_bootstrap3}/***.scss”,
];
让sassPaths=[];
对于(设j=0;jfile.base));
});
吞咽任务('watch',函数(){
返回大口的手表(sassGlobs,['sass']);
});
吞咽任务('default',['sass','watch']);
我用来解决这个问题的是++
这里的关键点是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.
});
非常确定
sassPaths
在您使用它时仍然是空的,因为glob
是异步的。我已经测试过,并且sassPaths填充正确。