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 */
Ответы
Ответ 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']
(Не беспокойтесь об этом. Мне потребовалось больше времени, чтобы понять, чем это должно было бы быть...)