title: Gulp, Wiredep and Bower dependencies
body: <p>I want to adapt a gulpfile.js and change my <code>bower_components/</code> folder to <code>app/bower_components/</code>.</p>
  
  <p>I updated the directory in <code>.bowerrc</code>, so now everytime i do a <code>bower install</code> it will use the right one:</p>
  
  <pre><code>{
    "directory": "app/bower_components"
  }
  </code></pre>
  
  <p><strong>Now, how can <code>gulp-wiredep</code> write the correct Sass path location inside my main Sass file?</strong> </p>
  
  <p>For example, <code>gulp-wiredep</code> adds the following line in my <code>main.scss</code> file, right after <code>// bower:scss</code>:</p>
  
  <p><code>@import "bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";</code></p>
  
  <p>It should be now <code>@import "app/bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";</code></p>
  
  <p>How can I change that path? I believe it's some configuration on the <code>wiredep</code> task:</p>
  
  <pre><code>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'));
  });
  </code></pre>
  
  <p>But I don't know how can I configure that to do what I need, I couldn't find any documentation about that.</p>
  
  <p>I know that if I change manually that path in my sass file to <code>"app/bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss"</code>, the <code>gulp serve</code> will work, but as soon as i install a bower component it will change that path to the one without the <code>app/</code> at the beginning again and it will break the task. </p>
  
  <p>How to fix that?</p>
  
  <p>Done:</p>
  
  <pre><code>// 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'));
  });
  </code></pre>