使用Libsass＆Susy默認任務時的Gulp Bower錯誤

Question

當我第一次運行gulp任務（默認）時，sass任務在Bower軟件包上給出錯誤。更具體地說，在Susy。

錯誤：

Plumber found unhandled error: 
    Error in plugin 'gulp-sass' 
    Message: 
     file to import not found or unreadable: su/utilities 
    Current dir: /Users/Jeroen/sites/gulp/bower_components/susy/sass/susy/ 

超對稱涼亭包裝被成功地安裝了gulp-bower，從我bower.json文件利用其信息。但是，當默認任務到達sass任務時，它無法找到Susy。

style.scss

@import "../bower_components/susy/sass/susy"; 

當我第一次運行gulp這隻發生。此錯誤發生後，watch任務不會停止/中斷，並且繼續工作。 （我可以在沒有問題的情況下編譯sass）。

但它看起來有點凌亂，關於如何防止這種情況的任何想法？

你可以在這裏看到我的整個gulpfile.js： https://gist.github.com/JeroenDelbrk/798d646af5cc2ad78da0

提示我如何能提高我的gulpfile，無關這個問題，也歡迎。

Answer 1

在這一行

gulp.task('default', ['bower', 'sass', 'scripts', 'imagemin', 'iconfont', 'watch']); 

所有的任務並行獲取執行。如果你沒有任何依賴關係，這很好。然而，從您的解釋來看，成功運行sass強烈依賴於成功執行bower。當您運行sass時，bower可能無法完成，因此無法提供您需要的文件。

要在Gulp 3. *中解決這個問題，您需要正確連接您的依賴關係。我建議如下：

// Define plugins 
var gulp = require('gulp'), 
    gulpLoadPlugins = require('gulp-load-plugins'); 
    $ = gulpLoadPlugins(); 

gulp.task('bower', function() { 
    return $.bower() 
    .pipe(gulp.dest('./bower_components')) 
}); 

// Sass compile + prefix task 
gulp.task('sass', ['bower'], function(){ 
    ... 
}); 



// Default Task 
gulp.task('default', ['sass', 'scripts', 'imagemin', 'iconfont']); 

// Watch Task 
gulp.task('watch', ['default'], function(){ 
    gulp.watch('sass/**/*.scss', ['sass']); 
    gulp.watch('js/*.js', ['scripts']); 
    gulp.watch('originals/*', ['imagemin']); 
    gulp.watch('icons/*.svg', ['iconfont']); 
}); 

和ruf gulp watch。這將執行可以同時並行運行的所有任務，但在sass之前將執行涼亭。您可能會遇到的一個問題：每次執行sass時，都會運行bower。這就是爲什麼我們會使用gulp-changed來防止重播。

gulp.task('bower', function() { 
    return $.bower() 
    .pipe(changed('./bower_components')) 
    .pipe(gulp.dest('./bower_components')) 
}); 

希望這有助於