Getting Bower Components in Gulp
So on a normal project you might have jquery, underscore/lodash and require.js all installed by bower.
Notice the main file listed there. If we could read all the bower.json files from all our bower packages then you could figure out what files to include. There is, as with all things gulp, a plugin for that. You can install it by running
npm install --save-dev main-bower-files
Now you can reference this from your gulp file by doing
var mainBowerFiles = require('main-bower-files');
You can plug this task into gulp like so
From time to time you might find a package that fails to properly specify a main file. This is a bit annoying and certainly something you should consider fixing and submitting back to the author. To work around it you can specify an override in your own bower.json file.
Great! Okay now what if you have an ordering dependency? Perhaps you need to load requirejs as the last thing in your bundle. This can be done through the ordering plugin. Start with npm and install the plugin:
npm install --save-dev gulp-order
Again you’ll need to specify the package inside the gulp file
var order = require('gulp-order');
Now you can plug the ordering into the build pipeline
The ordering plugin doesn’t, at the time of writing, support matching the last rule so making something appear last is harder than making it appear first. There is, however, a pull request out to fix that.