我正在使用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手表可能是缓存的风格,但真的不确定.
以下是我的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 + '";';
}
}))
全GULP文件：
https://jsfiddle.net/cwu0m1cp/
根据要求,这里是带有导入的SASS文件,只要手表任务未运行,它就可以正常工作,导入的文件不包含CSS：
/* inject:imports */ @import "components/_test.scss"; @import "components/_test-copy.scss"; /* endinject */
/* inject:imports */ @import "components/_test.scss"; /* endinject */
解决方法
当您以style / components /删除文件时,您的build-sass任务就会启动.那时注射 – deps任务还没有运行,所以相应的@import还没有被删除.
这是因为这样的原因：
plugins.watch([paths.dev+'/**/*.scss',!paths.dev+'/style/components/**/*.scss']
你实际上并没有创建一个字符串！在这里开始你正在否定评估为false(hurray JavaScript！)的paths.dev字符串.所以你的路径最终是’false_dev / style / components / ** / *.scss’
应该是这样的：
plugins.watch([paths.dev+'/**/*.scss','!' + paths.dev+'/style/components/**/*.scss']
(不用担心,太长时间了,应该比它应该有)
