gulp-inject不能与gulp-watch一起工作

Question

我正在使用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 + '";';
        }
    }))

完整的GULP文件: https ://jsfiddle.net/cwu0m1cp/

这里要求的是带有导入的SASS文件,只要监视任务没有运行就可以正常工作,导入的文件不包含CSS:

删除前的SASS文件:

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

删除后的SASS文件:

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

Answer 1

build-sass每当您删除文件时,您的任务就会启动style/components/.到那时inject-deps任务尚未运行,因此相应的@import尚未删除.

发生这种情况的原因是因为这一行:

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

你实际上并没有!在这里创建一个带有a的字符串.你否定了paths.dev评估的字符串false(欢呼JavaScript!).所以你的道路最终成了'false_dev/style/components/**/*.scss'

它应该是这样的:

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

(别担心.我花了很长时间才弄清楚它应该有的......)