gulp-inject không hoạt động với gulp-watch

Question

Tôi đang sử dụng gulp-inject để tự động thêm SASS nhập khẩu khi chúng mới được tạo trong dự án của tôi. Đây hoạt động tốt, các tập tin Sass mới được nhập khẩu một cách chính xác, tuy nhiên khi một tập tin đã nhập khẩu sẽ bị xóa trong khi ngụm-đồng hồ đang chạy nó bị treo với các lỗi sau:

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"; 

Tôi đã dành một vài giờ tốt cố gắng làm việc lý do tại sao nó cố gắng biên dịch một phiên bản cũ hơn của bảng định kiểu với nhập khẩu lỗi thời. Tôi thiết lập một sự chậm trễ trên nhiệm vụ SASS và nhập khẩu là chính xác trong tập tin thực tế bởi thời gian chạy gulp-sass. Tôi đã đọc rằng gulp-watch có thể được bộ nhớ đệm stylehseet, nhưng thực sự không chắc chắn.

Dưới đây là các bit liên quan của tệp Gulp của tôi, ở dưới cùng là liên kết đến tệp gulp đầy đủ của tôi.

Dưới đây là nhiệm vụ đồng hồ của tôi: (Các thành phần nhiệm vụ kích hoạt nhiệm vụ 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 nhiệm vụ

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

Tiêm nhiệm vụ

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

ĐẦY ĐỦ Gulp FILE: https://jsfiddle.net/cwu0m1cp/

Theo yêu cầu ở đây là tập tin với nhập khẩu các Sass, nó hoạt động tốt miễn là nhiệm vụ đồng hồ không chạy, các tập tin nhập khẩu không chứa CSS:

Sass FILE TRƯỚC DELETE:

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

Sass FILE SAU DELETE:

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

Answer 1

Nhiệm vụ build-sass của bạn bắt đầu bất cứ khi nào bạn xóa tệp trong style/components/. Vào thời điểm đó, nhiệm vụ inject-depschưa hoạt động, do đó, @import tương ứng chưa bị xóa.

Lý do điều này xảy ra là vì dòng này:

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

Bạn đang không thực sự tạo ra một chuỗi với một ! ở đầu đây. Bạn đang phủ nhận số paths.dev chuỗi đánh giá là false (JavaScript nhanh)! Vì vậy, con đường của bạn kết thúc lên được 'false_dev/style/components/**/*.scss'

Nó phải được điều này thay vì:

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

(. Đừng lo lắng về nó đã cho tôi thời gian để tìm ra so với nó cần phải có, quá ...)