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 + '";';
        }
    }))

完整文件： https ://jsfiddle.net/cwu0m1cp/

根據要求，這里是帶有導入的SASS文件，只要不運行watch任務，導入的文件就不包含CSS，它就可以正常工作：

刪除前先保存文件：

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

刪除后保存文件：

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

Answer 1

每當您刪除style/components/的文件時， build-sass任務就會開始。 到那時， inject-deps任務還沒有運行，因此尚未刪除相應的@import 。

發生這種情況的原因是由於以下這一行：

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

您實際上並沒有使用!創建字符串! 在這里開始。 您正在否定要評估為false的paths.dev字符串（歡呼JavaScript！）。 所以你的路徑最終是'false_dev/style/components/**/*.scss'

應該是這樣的：

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

（不用擔心。花了我更長的時間去弄清楚它應該有的……）