How do I minify Bower components with Yeoman?

Question

When I execute:

yeoman init angular
yeoman install https://github.com/angular/bower-angular.git
yeoman build

Then

ls dist/components/bower-angular/

returns

angular.js  component.json

While I expected angular.js to be minified and renamed to d10639ae.angular.js or something similar.

Any idea's?

Answer 1

Minification in Yeoman is taken care of by the usemin-handler :

GruntFile.js

 // usemin handler should point to the file containing
    // the usemin blocks to be parsed
    'usemin-handler': {
      html: 'index.html'
    },

So open your index.html :

It should contain code like:

    <script src="scripts/vendor/angular.js"></script>

    <!-- build:js scripts/scripts.js -->
    <script src="scripts/app.js"></script>
    <script src="scripts/controllers/main.js"></script>
    <!-- endbuild -->

Everything between build:js and endbuild will be minified. So if you want to minify other libraries, place them between these two comment lines.

Note: there is an angular seed for Yeoman:

yeoman init angular