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

希望这有助于