Ошибка Gulp Bower в задаче по умолчанию с Libsass & Susy

Когда я запускаю задачу 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 не останавливается/не ломается после этой ошибки и продолжает работать после. (Я могу скомпилировать sass без проблем).

Но это выглядит немного грязно, есть идеи, как я могу это предотвратить?

Вы можете увидеть весь мой gulpfile.js здесь: https://gist.github.com/JeroenDelbrk/798d646af5cc2ad78da0

Советы о том, как я могу улучшить свой gulpfile, не связанные с этим вопросом, также приветствуются.


gulp bower gulp-sass susy
person Jrn    schedule 04.04.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

В этой строке

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. Одна проблема, с которой вы можете столкнуться: запуск bower каждый раз, когда вы будете выполнять sass. Вот почему мы будем использовать gulp-changed для предотвращения повторных показов.

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

Надеюсь это поможет

person ddprrt    schedule 04.04.2015
comment
Спасибо, добавление зависимостей задачи решает проблему. Однако, когда я добавляю gulp-changed в смесь, выдает другую ошибку: TypeError: Cannot read property 'mtime' of null. Я не знал об этом плагине, и он выглядит довольно полезным. Так что я посмотрю, сможешь ли ты заставить его работать. Спасибо за помощь! - person Jrn; 04.04.2015
comment
Возможно, поэтому gulp-changed не работает: github.com/sindresorhus/gulp-changed/issues /27 - person Jrn; 05.04.2015
comment
Ах, достаточно справедливо. gulp-newer также может быть одним из подключаемых модулей, который может вас заинтересовать: npmjs.com/package/gulp-newer< /а> - person ddprrt; 05.04.2015