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

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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

gulp-inject not working with gulp-watch

Sign up