Gulp Libsass 和 Susy 的默认任务 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/

Susy bower 包正在使用 gulp-bower 成功安装，其信息来自我的 bower.json 文件。然而，当默认任务到达 sass 任务时，它找不到 Susy。

style.scss

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

这只会在我运行 gulp 第一次出现时出现。 watch 任务在此错误后不会 stop/breaks，并在之后继续工作。（我可以毫无问题地编译 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。这将同时执行所有可以运行并行的任务，但是 bower 将在 sass 之前执行。您可能会遇到一个问题：每次执行 sass 时运行 bower。这就是我们将使用 gulp-changed 来防止 re运行的原因。

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

希望对您有所帮助

Gulp Libsass 和 Susy 的默认任务 Bower 错误

Gulp Bower error on default task with Libsass & Susy

bower

gulp

gulp-sass

susy