gulp-inject не работает с gulp-watch

Я использую gulp-inject для автоматического добавления импорта SASS, поскольку они недавно созданы в моем проекте. Это работает нормально, новые файлы SASS импортируются правильно, однако, когда уже импортированный файл удаляется во время работы gulp-watch, он падает со следующей ошибкой:

 Error: _devstylestyle.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, и импорт корректен в фактический файл к моменту запуска gulp-sass. Я читал, что gulp-watch может кэшировать stylehseet, но на самом деле не уверен.

Ниже приведены соответствующие биты моего файла Gulp, внизу находится ссылка на мой полный файл gulp.

вот мои часы задачи: (Задача components запускает задачу SASS)

// 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/'));
});

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 + '";';
        }
    }))

ПОЛНЫЙ ГЛОТОК Файл: https://jsfiddle.net/cwu0m1cp/

как запрошено здесь, это файл SASS с импортом, он работает нормально, пока задача watch не запущена, импортированные файлы не содержат CSS:

SASS ФАЙЛ ПЕРЕД УДАЛЕНИЕМ:

/* inject:imports */
@import "components/_test.scss";
@import "components/_test-copy.scss";
/* endinject */

SASS ФАЙЛ ПОСЛЕ УДАЛЕНИЯ:

/* inject:imports */
@import "components/_test.scss";
/* endinject */

1 ответов


код build-sass задач начинается всякий раз, когда вы удаляете файл в style/components/. К тому времени inject-deps задание не run Еще, поэтому соответствующий @import еще не удалено.

причина это происходит из-за этой строки:

plugins.watch([paths.dev+'/**/*.scss',!paths.dev+'/style/components/**/*.scss']

вы на самом деле не создаете строку с ! в начале здесь. Ты отрицание the paths.dev строка, которая принимает значение false (ура JavaScript!). Так что твой путь заканчивается. бытие 'false_dev/style/components/**/*.scss'

это должно быть вместо этого:

plugins.watch([paths.dev+'/**/*.scss','!' + paths.dev+'/style/components/**/*.scss']

(Не беспокойтесь об этом. Мне тоже потребовалось больше времени, чтобы понять это...)