How to set up wiredep with gulp and jade

Question

I am trying to inject bower files into my jade/html using wiredep. The issue is twofold.

1. If I were to keep the bower_component in the root folder. Being that my server is set up from ./dist and not from root, I am unable to reach bower_compoents
2. If I were to install bower-components in my ./dist folder(which makes sense, as of now), and create a unique filepath for bower_components, my bower.json(it needs this to pick up proper filepath also), then it adds the extra filepath ./dist to my bower_components. However, being that my server is in ./dist, I need to remove ./dist from my filepath.

I will be answering this one for option #2. I just want to put it out there for others who want to do the same or something similar.

In the future I do want to keep bower_components in my root in order to compile them all into one js file. For now this works, as it is mostly for prototyping reasons. However, definitely interested in finding a way to make #1 work.

Answer 1

I set up a branch in the github here for those interested in seeing the file structure and the full gulpfile.js

What I ended up doing is installing all of the bower_components in my dist folder. I also put my bower.json there.

For the wiredep and jade magic I added the following to my gulpfile.js:

gulp.task('templates', function() {

  var YOUR_LOCALS = {};

  gulp.src('./app/jade/*.jade')
      .pipe(jade({
          locals: YOUR_LOCALS,
          pretty: true
      }))
      .pipe(wiredep({
      directory: './dist/bower_components',
      bowerJson: require('./dist/bower.json'),
      ignorePath: '/dist'
      }))
      .pipe(gulp.dest('./dist'))
});

The magic happens in one real place and that is the ignorePath option for wiredep. I am able to have the directory from the dist folder. However, being that the filepath includes ./dist, and I can't have that being that my server works from ./dist, I was able to ignore ./dist and it outputted the proper file path.

Another note, in order to includes, let's say javascript files in bower for jade, use the following syntax

// bower:js
// endbower

That's it and if this only helped one person there, it was worth it. If you have any questions feel free to leave a comment.