How to change bower-installer path for one component

Question

I am using bower-installer to copy files I need from bower_components folder into bower_dist folder. Here is relevant part of bower.json file:

"install": {
    "path": "bower_dist"
},
"dependencies": {
    "jquery": "~2.1.4",
    "bootstrap": "~3.3.4",
    "slick.js": "~1.5.5"
},

Now this is creating bower_dist folder and within it folder for each component. The problem is that within slick.js component I have few files (eot, svg, ttf, woff) that I need to have in /slick.js/fonts folder (rather than just /slick.js/ folder).

How do I do this? I've tried specifying special case for eot, svg, ttf and woff, but then that gets applied to all components. Plus I don't want to introduce need to specify all file types (js, css, etc)... rather want to just configure special font type for slick.js. Is this possible to do?

Answer 1

The problem here appears to be that slick.js uses a glob pattern in their bower.json main file array which is not supported...

Globs like js/*.js are not allowed.

You should do the following...

1. Override the required files for slick.js in your bower.json file (see Install multiple main files and Configurable paths)

   "install": {
       "base": "bower_dist",
       "path": {
           "js": "{name}",
           "css": "{name}",
           "eot": "{name}/fonts",
           "svg": "{name}/fonts",
           "ttf": "{name}/fonts",
           "woff": "{name}/fonts"
       },
       "sources": {
           "slick.js": [
               "bower_components/slick.js/slick/slick.min.js",
               "bower_components/slick.js/slick/slick.css",
               "bower_components/slick.js/slick/slick-theme.css",
               "bower_components/slick.js/slick/fonts/slick.eot",
               "bower_components/slick.js/slick/fonts/slick.svg",
               "bower_components/slick.js/slick/fonts/slick.ttf",
               "bower_components/slick.js/slick/fonts/slick.woff"
           ]
       }
   }
   

   Substitute bower_components for whatever your bower install directory is.

2. Follow this pull request.

Answer 2

This proved to be tougher than I thought:

"install": {
    "path": "bower_dist",
    "sources": {
        "slick-carousel": {
            "mapping": [
                { "bower_components/slick-carousel/slick/slick.min.js": "slick.min.js" },
                { "bower_components/slick-carousel/slick/slick.css": "slick.css" },
                { "bower_components/slick-carousel/slick/slick-theme.css": "slick-theme.css" },
                { "bower_components/slick-carousel/slick/ajax-loader.gif": "ajax-loader.gif" },
                { "bower_components/slick-carousel/slick/fonts/slick.eot": "fonts/slick.eot" },
                { "bower_components/slick-carousel/slick/fonts/slick.svg": "fonts/slick.svg" },
                { "bower_components/slick-carousel/slick/fonts/slick.ttf": "fonts/slick.ttf" },
                { "bower_components/slick-carousel/slick/fonts/slick.woff": "fonts/slick.woff" }
            ]
        }
    }
},

I've upgraded to new version of slick.js and now it's called slick-carousel in bower - just to explain difference in package name.