2016-08-17 55 views
10

我使用gulp-inject自動添加SASS導入,因爲它們是在我的項目中新創建的。這工作得很好,新SASS文件被正確導入,但是當一個已經導入的文件,同時一飲而盡手錶刪除正在運行,並出現以下錯誤崩潰:gulp-inject與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-watch可能會緩存stylehseet,但真的不確定。

下面是我的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 + '";'; 
     } 
    })) 

FULL GULP FILE: 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 */ 
+0

'inject-deps'和'build-sass'都來源於同一個文件。爲什麼這不僅僅是一個流/任務?爲什麼'inject-deps'沒有'gulp.dest()'? –

+0

怎麼了所有這些任務:'watch:message','watch:reload','clean:pub','build:pub'。要麼他們與你的問題有關,那麼你需要包括他們。或者他們不相關,那麼不要提及他們。閱讀[這](http://stackoverflow.com/help/mcve) –

+0

當sass和注入都在同一個任務,我得到一個監視循環,我不得不分開出來,因爲這一點。我複製了我的整個任務,你提到的這些部分是不相關的,如果它更清楚,我可以將它們刪除。 – Alex

回答

5

,只要您在style/components/刪除一個文件你build-sass任務開始。到那時inject-deps任務尚未運行,所以相應的@import尚未被刪除。

出現這種情況的原因是因爲該行的:

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

你沒有真正在這裏開始創建與!的字符串。你是否定paths.dev字符串,其值爲false(hurray JavaScript!)。所以,你的路徑最終被'false_dev/style/components/**/*.scss'

它應該是這個:

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

(別擔心,我花了更長的時間來找出比它應該有,太...)

+0

令人驚訝的是,發現了幾天!非常感謝! – Alex