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成功安装Susy 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。这将执行所有可以同时并行运行的任务，但是bower将在sass之前执行。您可能遇到的一个问题：每次执行bower时都要运行sass。这就是为什么我们会使用gulp-changed来防止重播。

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

希望这有帮助

使用Libsass＆amp; amp; Gulp Bower在默认任务上出错与Susy

1 个答案: