0

gulpタスク (デフォルト) を初めて実行するsassと、Bower パッケージでエラーが発生します。より具体的にはスージーについて。

エラー：

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 パッケージは、私の bower.json ファイルから情報を取得して、gulp - bower で正常にインストールされています。ただし、デフォルトのタスクがsassタスクに到達すると、Susy が見つかりません。

スタイル.scss

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

gulpこれは、初めて実行したときにのみ発生します。このwatchエラーの後、タスクは停止/中断せず、その後も作業を続けます。（問題なくsassをコンパイルできます）。

しかし、それは少し乱雑に見えます。これを防ぐ方法についてのアイデアはありますか?

私の全体の gulpfile.js はここで見ることができます: https://gist.github.com/JeroenDelbrk/798d646af5cc2ad78da0

この質問とは関係なく、gulpfile を改善する方法に関するヒントも歓迎します。

4

1 に答える 1

0

この行で

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

そしてラフgulp watch。これにより、並行して実行できるすべてのタスクが同時に実行されますが、bower は sass の前に実行されます。直面する可能性のある問題の 1 つbowerは、実行するたびに実行することsassです。そのgulp-changedため、再実行を防ぐために使用します。

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

お役に立てれば

于 2015-04-04T19:54:40.513 に答える