我使用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 */
'inject-deps'和'build-sass'都來源於同一個文件。爲什麼這不僅僅是一個流/任務?爲什麼'inject-deps'沒有'gulp.dest()'? –
怎麼了所有這些任務:'watch:message','watch:reload','clean:pub','build:pub'。要麼他們與你的問題有關,那麼你需要包括他們。或者他們不相關,那麼不要提及他們。閱讀[這](http://stackoverflow.com/help/mcve) –
當sass和注入都在同一個任務,我得到一個監視循環,我不得不分開出來,因爲這一點。我複製了我的整個任務,你提到的這些部分是不相關的,如果它更清楚,我可以將它們刪除。 – Alex