Bower and Grunt - A practical workflow

Bower is a great tool: it searches, downloads and tracks all our front end dependencies.

But it is not enough: we get all sort of useless files when we download our libraries: docs/test/src/dist/ all this folders ar useless for us.

We only need one file, usually non minified (we all have a uglify task in our workflow, do we?)

We want to be able to copy css and js to different vendor folder

We do not want to commit our bower_components folder

We want just the libraries that we use in our vendor folders

We want just one version of each library in our vendor folders

So, it is clear that Bower alone is not enough, so I put together a very simple yet powerful workflow to get all these points sorted.

Step 1: Bower

A package manager for the web

Use Bower as you always do, saving your dependencies into the bower.json file with the --save and --save-dev flags.

Step 2: grunt-bowercopy

Consistently positions your dependencies where you want them in your repository

Once you have all your dependencies in your bower_components folder, it is time to move them into specific folders (e.g. /publis/js/vendor/ and /publis/css/vendor/): grunt-bowercopy is the tool for you.

Install the plugin:

npm install grunt-bowercopy --save-dev

Now create a Grunt task for it. In your grunt folder (you are using load-grunt-config, right?), create a new file: bowercopy.js.

The following is just an example. Notice that you don't need to specify the bower_components folder in your configuration: grunt-bowercopy will read your .bowerrc and will prepend the right folder name for you.