Gulp, Wiredep and Bower dependencies

Question

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

Answer 1

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