I am using gulp-inject to auto add SASS imports as they are newly created in my project. This works fine, the new SASS files are imported correctly, however when an already imported file is deleted whilst gulp-watch is running it crashes with the following error:
Error: _dev\style\style.scss
Error: File to import not found or unreadable: components/_test - Copy.scss
Parent style sheet: stdin
on line 2 of stdin
>> @import "components/_test - Copy.scss";
// SASS
plugins.watch([paths.dev+'/**/*.scss',!paths.dev+'/style/components/**/*.scss'], function () {gulp.start(gulpsync.sync([
'build-sass'
]));});
// COMPONENTS
plugins.watch(paths.dev+'/style/components/**/*.scss', function () {gulp.start(gulpsync.sync([
'inject-deps'
]));});
gulp.task('build-sass', function() {
// SASS
return gulp.src(paths.dev+'/style/style.scss')
.pipe(plugins.wait(1500))
.pipe(plugins.sass({ noCache: true }))
.pipe(gulp.dest(paths.tmp+'/style/'));
});
gulp.task('inject-deps', function() {
// Auto inject SASS
gulp.src(paths.dev+'/style/style.scss')
.pipe(plugins.inject(gulp.src('components/**/*.scss', {read: false, cwd:paths.dev+'/style/'}), {
relative: true,
starttag: '/* inject:imports */',
endtag: '/* endinject */',
transform: function (filepath) {
return '@import "' + filepath + '";';
}
}))
/* inject:imports */
@import "components/_test.scss";
@import "components/_test-copy.scss";
/* endinject */
/* inject:imports */
@import "components/_test.scss";
/* endinject */
Your build-sass
task starts whenever you delete a file in style/components/
. By that time the inject-deps
task hasn't run yet, so the corresponding @import
hasn't been deleted yet.
The reason this happens is because of this line:
plugins.watch([paths.dev+'/**/*.scss',!paths.dev+'/style/components/**/*.scss']
You're not actually creating a string with a !
at the beginning here. You're negating the paths.dev
string which evaluates to false
(hurray JavaScript!). So your path ends up being 'false_dev/style/components/**/*.scss'
It should be this instead:
plugins.watch([paths.dev+'/**/*.scss','!' + paths.dev+'/style/components/**/*.scss']
(Don't worry about it. Took me longer to figure out than it should have, too...)