Incremental Caching System for Gulp and NodeSass
There are a lot of community-based solutions which face the issue regarding the gulp incremental building (gulp-progeny
is definitely one of these). Because of its agnostic nature, gulp cannot know the related files to the one edited, and, because of this, it needs to resync all the sources with their corresponding outputs gulp.src('src/**/*.scss').pipe(gulp.dest('./dest'))
.
Because it is specifically designed on top of gulp
and node-sass
, it isn't thought to be agnostic and work with different file types (as gulp-progeny
is). For example, while editing a parent, you don't need to add any imported file to the stream because that is how sass works, otherwise, you need to add any parent while editing a child and that is what gulp-sass-pedigree
exactly does.
- No unnecessary file system access (
fs.existsSync
only) - Multiple inline imports
@import "foo", "baz", "foobaz";
- Nested imports
.foo { @import "baz"; }
and.foobaz { @import "foo"; }
- Top files only (eg: if
a => b => c
while editingc
, onlya
will be added to the stream) - Sass Specific file name convention (eg: it handles
foo
, but also_foo
with or without extension)
npm install --save-dev gulp-sass-pedigree
const gulp = require('gulp');
const sass = require('gulp-sass');
const options = {
ext: '.scss', // string (the file extension)
verbose: false // boolean,
includePaths: [] // string[] (additional paths where to look for files
};
const {study, getAncestors} = require('gulp-sass-pedigree')(options);
gulp.task('sass:all', () => {
return gulp
.src('path/to/**/*.scss')
.pipe(study())
.pipe(sass())
.pipe(gulp.dest('./dist'))
;
});
gulp.task('sass:watch', ['sass:all'], () => {
return gulp
.watch('path/to/**/*.scss', event => {
return gulp
.src(event.path)
.pipe(getAncestors())
.pipe(sass())
.pipe(gulp.dest('./dist'))
;
})
;
});