当我第一次运行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包正在与gulp-bower一起成功安装,它的信息来自我的bower.json文件。但是,当默认任务到达sass
任务时,它找不到Susy。
样式.scs
@import "../bower_components/susy/sass/susy";
只有当我第一次运行gulp
时才会出现这种情况。watch
任务不会在此错误后停止/中断,并在之后继续工作。(我可以毫无问题地编译sass)。
但它看起来有点乱,有什么想法我可以防止这种情况吗?
你可以在这里看到我的整个gullfile.js:https://gist.github.com/JeroenDelbrk/798d646af5cc2ad78da0
关于如何改进我的gulpfile的提示,与这个问题无关,也很受欢迎。
在行中
gulp.task('default', ['bower', 'sass', 'scripts', 'imagemin', 'iconfont', 'watch']);
所有的任务都是并行执行的。如果你没有任何依赖关系,这很好。然而,从您的解释来看,sass
的成功运行在很大程度上取决于bower
的成功执行。在运行sass
时,bower
可能尚未完成,因此无法提供所需的文件。
要在Gulp3.*中解决这个问题,您需要正确连接您的依赖关系。我建议如下:
// 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
来防止重播。
gulp.task('bower', function() {
return $.bower()
.pipe(changed('./bower_components'))
.pipe(gulp.dest('./bower_components'))
});
希望这能帮助