Подтвердить что ты не робот

Gulp -инъект не работает с gulp -watch

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

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

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

Вот мои задачи: (Задача компонентов запускает задачу 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'
]));});

Задача SASS

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

FULL Gulp ФАЙЛ: https://jsfiddle.net/cwu0m1cp/

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

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

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

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

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

Ответ 1

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

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

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

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

Это должно быть так:

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

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