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