Я использую 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 */