gulp-inject not working with gulp-watch
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";
I have spent a good few hours trying to work out why it tries to compile an older version of the stylesheet with out of date imports. I set a delay on the SASS task and the imports are correct in the actual file by the time the gulp-sass runs. I have read that gulp-watch may be caching the stylehseet, but really not sure.
Below are the relevant bits of my Gulp file, at the bottom is a link to my full gulp file.
Here are my watch tasks:
(The components task triggers the SASS task)
// 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'
]));});
SASS task
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/'));
});
Inject task
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 + '";';
}
}))
FULL GULP FILE:
https://jsfiddle.net/cwu0m1cp/
As requested here is the SASS file with the imports, it works fine as long as the watch task isn't running, the imported files contain no CSS:
SASS FILE BEFORE DELETE:
/* inject:imports */
@import "components/_test.scss";
@import "components/_test-copy.scss";
/* endinject */
SASS FILE AFTER DELETE:
/* 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...)