I am trying to inject bower files into my jade/html using wiredep. The issue is twofold.
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.
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.