How to configure Grunt to replace Bower dependencies by its minified versions

Question

I am new to Yeoman/Grunt/Bower. I have a bower.json file that defines the following dependencies:

bower.json

{
    \"         


        

Answer 1

Another option if you are interested in using minified javascript and also having the package version in the include path is to use grunt-version-copy-bower-components. This grunt plugin handles copying the bower component to a destination directory, includes the component version in the component path, and modifies referencing files (html and css) to use the versioned minified path.

Including the version in the components path can be helpful if the site is hosted with a cache (behind a CDN). It allows you to specify long cache times for the bower components. When switching to a new bower component version the URL will be new and the cache will fetch the new one instead of serving a stale component.

An example configuration:

versionCopyBowerComponents: {
  options: {
    exclude: ['underscore'],
    dest: 'dist/libs',
    filesReferencingComponents: {
      files: ['dist/test.html', 'dist/test.css'],
      useComponentMin: true
    }
  }
}

The plugin will determine the bower components that your project is using and automatically install them to the path specified in dest. The files listed in filesReferencingComponents->files are files that include/source the bower component. Specifying useComponentMin will cause it to choose the minified version of the component.