gulp-inject not working with gulp-watch

Question

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 */

Both `inject-deps` and `build-sass` source the same file. Why isn't this just one stream/task? And why doesn't `inject-deps` have a `gulp.dest()`? — Sven Schoenung, Aug 17 '16 at 16:10
And what's up with all those tasks: `watch:message`, `watch:reload`, `clean:pub`, `build:pub`. Either they're relevant to your question then you need to include them. Or they're not relevant then don't bother mentioning them. Read [this](http://stackoverflow.com/help/mcve) — Sven Schoenung, Aug 17 '16 at 16:11
I was getting a watch loop when both sass and inject were in the same task, I had to separate them out due to this. I copied out my whole task, the bits you mentioned aren't relevant, I could take them out if its clearer. — Alex, Aug 17 '16 at 19:31
I've cleaned up the question and included the whole gulp file if you have any suggestions for the issue? — Alex, Aug 20 '16 at 06:53
@Alex, can you show scss file, because I think it is sass error — Aren Hovsepyan, Aug 20 '16 at 07:01
@Aren I have included the SASS, although it's working fine if the watch task isn't running so I doubt that's the issue — Alex, Aug 20 '16 at 07:29

Sven Schoenung · Accepted Answer · 2016-08-20T08:26:57.760

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...)

Amazing, I wouldn't have spotted that for days! Thanks very much! — Alex, Aug 20 '16 at 08:49

gulp-inject not working with gulp-watch

1 Answers1