I want to adapt a gulpfile.js and change my bower_components/
folder to app/bower_components/
.
I updated the directory in .bowerrc
, so now everytime i do a bower install
it will use the right one:
{
"directory": "app/bower_components"
}
Now, how can gulp-wiredep
write the correct Sass path location inside my main Sass file?
For example, gulp-wiredep
adds the following line in my main.scss
file, right after // bower:scss
:
@import "bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";
It should be now @import "app/bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";
How can I change that path? I believe it's some configuration on the wiredep
task:
gulp.task('wiredep', function () {
var wiredep = require('wiredep').stream;
gulp.src('app/styles/*.scss')
.pipe(wiredep({
ignorePath: /^(\.\.\/)+/
}))
.pipe(gulp.dest('app/styles'));
gulp.src('app/*.html')
.pipe(wiredep({
exclude: ['bootstrap-sass-official'],
ignorePath: /^(\.\.\/)*\.\./
}))
.pipe(gulp.dest('app'));
});
But I don't know how can I configure that to do what I need, I couldn't find any documentation about that.
I know that if I change manually that path in my sass file to "app/bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss"
, the gulp serve
will work, but as soon as i install a bower component it will change that path to the one without the app/
at the beginning again and it will break the task.
How to fix that?
Done:
// inject bower components
gulp.task('wiredep', function () {
var wiredep = require('wiredep').stream;
gulp.src('app/styles/*.scss')
.pipe(wiredep({
fileTypes: {
scss: {
replace: {
sass: '@import "app/{{filePath}}";',
scss: '@import "app/{{filePath}}";'
}
}
},
ignorePath: /^(\.\.\/)+/
}))
.pipe(gulp.dest('app/styles'));
gulp.src('app/*.html')
.pipe(wiredep({
exclude: ['bootstrap-sass-official'],
ignorePath: /^(\.\.\/)*\.\./
}))
.pipe(gulp.dest('app'));
});
You can use the directory
option of wiredep:
gulp.src('app/styles/*.scss')
.pipe(wiredep({
directory: 'app/bower_components',
fileTypes: {
scss: {
replace: {
scss: '@import "src/app/{{filePath}}";'
}
}
},
ignorePath: /^(\.\.\/)+/
}));
gulp.src('app/*.html')
.pipe(wiredep({
directory: 'app/bower_components',
exclude: ['bootstrap-sass-official'],
ignorePath: /^(\.\.\/)*\.\./
}))
.pipe(gulp.dest('app'));
Also, see their documentation