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?

Phil · Answer 1 · 2015-07-20T03:14:46.930

6

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...

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.

Follow this pull request.

edited Jul 20 '15 at 03:14

answered Jul 13 '15 at 23:31

Phil

157,677
23
242
245

As soon as I add "sources": { "slick.js": ... command bower-installer stops publishing slick.js. Are you sure that's proper format? I've also tried modifying bower.json from slick.js the way you did it in pull request but still it doesn't work - it doesn't create proper folder structure. – nikib3ro Jul 19 '15 at 19:03
@kape123 I was just following the bower-installer documentation ~ https://github.com/blittle/bower-installer#install-multiple-main-files. Looks like you need to prefix the file path with your bower install directory. I'll update my answer with an example – Phil Jul 19 '15 at 23:41
yeah when I put it like that, it copies files. But it again puts them all in the same directory - /bower_dist/slick.js/ ... it doesn't create fonts directory for fonts. ;( – nikib3ro Jul 20 '15 at 02:53
@kape123 then I'd guess you need to use the [configurable paths](https://github.com/blittle/bower-installer#configurable-paths) – Phil Jul 20 '15 at 03:11
Those would mess up all components, which is not something I wanted as I explained in the question. I am granting you bounty since you helped, but I am adding correct answer on my own. Thanks for your help! – nikib3ro Jul 20 '15 at 14:39
@kape123 glad you got it sorted. I wasn't sure if the file-type path mapping would work for you but it was worth a shot. Last resort would have been the individual file mapping which it seems is what you needed. – Phil Jul 20 '15 at 23:42

score 2 · Accepted Answer · answered Jul 20 '15 at 14:38

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.

How to change bower-installer path for one component

2 Answers2